/*
Theme Name: د. أحمد حسان - استشاري العيون والليزك
Theme URI: https://drahmedhassaan.com
Author: عيادة د. أحمد حسان
Description: قالب ووردبريس متعدد الصفحات لعيادة استشاري عيون وليزك: صفحة رئيسية (Hero/نبذة/تخصصات/عيادات) + نظام مقالات كامل (أرشيف وصفحة مقال فردي)، بألوان كحلي داكن وكريمي وذهبي، خط عربي مميز، RTL بالكامل، وكل البيانات قابلة للتعديل من لوحة تحكم ووردبريس (المخصص) بدون كود.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dr-ahmed
Tags: medical, blog, rtl, arabic, custom-colors
*/

/* ==========================================================================
   0. Design tokens (مطابقة لألوان الموقع الأصلي: كحلي داكن + كريمي + ذهبي)
   ========================================================================== */
:root{
  --dh-navy:        #0F2137;
  --dh-navy-soft:   #16283F;
  --dh-navy-card:   #1B3049;
  --dh-cream:       #F3EEE1;
  --dh-cream-alt:   #EFE9D9;
  --dh-white-card:  #FFFFFF;

  --dh-ink:         #12233A;
  --dh-ink-soft:    rgba(18,35,58,.68);
  --dh-ink-faint:   rgba(18,35,58,.45);

  --dh-white:       #F7F4EA;
  --dh-white-soft:  rgba(247,244,234,.70);
  --dh-white-faint: rgba(247,244,234,.45);

  --dh-gold:        #C9A227;
  --dh-gold-dark:   #A67F1D;
  --dh-gold-soft:   rgba(201,162,39,.16);

  --dh-line-dark:   rgba(247,244,234,.14);
  --dh-line-light:  rgba(18,35,58,.12);

  --dh-font-display: 'Baloo Bhaijaan 2', 'Tajawal', sans-serif;
  --dh-font-body:    'Tajawal', 'Segoe UI', sans-serif;

  --dh-radius-sm:  10px;
  --dh-radius-md:  18px;
  --dh-radius-lg:  26px;
  --dh-radius-full: 999px;

  --dh-shadow-sm: 0 2px 10px rgba(15,33,55,.08);
  --dh-shadow-md: 0 14px 34px rgba(15,33,55,.14);
  --dh-shadow-lg: 0 26px 60px rgba(9,20,34,.35);

  --dh-container: 1180px;
  --dh-container-narrow: 780px;
}

/* ==========================================================================
   1. Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--dh-cream);
  color: var(--dh-ink);
  font-family: var(--dh-font-body);
  font-size: 16px;
  line-height: 1.75;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; }
:focus-visible{ outline: 3px solid var(--dh-gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.dh-container{ max-width: var(--dh-container); margin-inline:auto; padding-inline:24px; }
.dh-container-narrow{ max-width: var(--dh-container-narrow); margin-inline:auto; padding-inline:24px; }

.dh-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--dh-font-body);
  font-weight:700;
  font-size:14px;
  color: var(--dh-gold);
}
.dh-eyebrow::before{ content:""; width:22px; height:2px; background: var(--dh-gold); flex-shrink:0; }

.dh-section-head{ max-width:640px; margin-bottom:44px; }
.dh-section-head h2{
  font-family: var(--dh-font-display);
  font-weight:700;
  font-size: clamp(28px, 3.6vw, 42px);
  margin-top:14px;
  line-height:1.3;
}
.dh-section-head p{ margin-top:14px; font-size:16.5px; }
.dh-section-head.dh-center{ margin-inline:auto; text-align:center; }
.dh-on-dark .dh-section-head h2{ color: var(--dh-white); }
.dh-on-dark .dh-section-head p{ color: var(--dh-white-soft); }
.dh-on-light .dh-section-head h2{ color: var(--dh-ink); }
.dh-on-light .dh-section-head p{ color: var(--dh-ink-soft); }

.dh-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  border-radius: var(--dh-radius-full);
  font-weight:700;
  font-size:15px;
  border:1.5px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.dh-btn:hover{ transform: translateY(-2px); }
.dh-btn-gold{ background: var(--dh-gold); color: var(--dh-navy); box-shadow: 0 10px 24px rgba(201,162,39,.32); }
.dh-btn-gold:hover{ background: var(--dh-gold-dark); }
.dh-btn-outline-dark{ background:transparent; color: var(--dh-ink); border-color: var(--dh-line-light); }
.dh-btn-outline-dark:hover{ border-color: var(--dh-ink); background: var(--dh-white-card); }
.dh-btn-outline-light{ background: rgba(247,244,234,.06); color: var(--dh-white); border-color: rgba(247,244,234,.35); }
.dh-btn-outline-light:hover{ background: rgba(247,244,234,.14); }
.dh-btn svg{ width:18px; height:18px; flex-shrink:0; }

/* ==========================================================================
   2. Header / Nav (شريط داكن ثابت في كل الصفحات)
   ========================================================================== */
.dh-header{
  position: sticky;
  top:0;
  z-index:100;
  background: rgba(15,33,55,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,162,39,.18);
}
.dh-header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:16px; }
.dh-logo{ display:flex; align-items:center; gap:12px; }
.dh-logo-mark{
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--dh-font-display);
  font-weight:700;
  font-size:16px;
  color: var(--dh-gold);
  border: 1.5px solid var(--dh-gold);
  flex-shrink:0;
}
.dh-logo-text{ line-height:1.35; }
.dh-logo-text strong{ display:block; font-family: var(--dh-font-display); font-size:16px; color: var(--dh-white); font-weight:700; }
.dh-logo-text span{ display:block; font-size:12px; color: var(--dh-white-faint); }

.dh-nav{ display:flex; align-items:center; gap:34px; }
.dh-nav a{ font-weight:500; font-size:15px; color: var(--dh-white-soft); position:relative; padding-block:4px; }
.dh-nav a::after{ content:""; position:absolute; right:0; bottom:-2px; width:0; height:2px; background: var(--dh-gold); transition:width .25s ease; }
.dh-nav a:hover{ color: var(--dh-white); }
.dh-nav a:hover::after{ width:100%; }
.dh-nav a.is-active{ color: var(--dh-gold); }

.dh-header-cta{ display:flex; align-items:center; gap:14px; }
.dh-burger{ display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--dh-line-dark); align-items:center; justify-content:center; }
.dh-burger span, .dh-burger span::before, .dh-burger span::after{ content:""; display:block; width:18px; height:2px; background: var(--dh-white); position:relative; transition:all .25s ease; }
.dh-burger span::before{ position:absolute; top:-6px; }
.dh-burger span::after{ position:absolute; top:6px; }
.dh-burger.is-open span{ background:transparent; }
.dh-burger.is-open span::before{ top:0; transform:rotate(45deg); }
.dh-burger.is-open span::after{ top:0; transform:rotate(-45deg); }

.dh-mobile-nav{ display:none; flex-direction:column; gap:2px; padding:10px 24px 22px; border-top:1px solid var(--dh-line-dark); }
.dh-mobile-nav.is-open{ display:flex; }
.dh-mobile-nav a{ padding:12px 4px; font-weight:600; color: var(--dh-white); border-bottom:1px solid var(--dh-line-dark); }
.dh-mobile-nav .dh-btn{ margin-top:14px; justify-content:center; }

/* ==========================================================================
   3. Hero (خلفية كحلي داكنة + مخطط سنيلن كخلفية زخرفية)
   ========================================================================== */
.dh-hero{ position:relative; background: var(--dh-navy); padding-block:64px 96px; overflow:hidden; }
.dh-hero-chart{
  position:absolute;
  top:18px; left:0; right:0;
  display:flex;
  justify-content:space-between;
  padding-inline:6vw;
  font-family: var(--dh-font-display);
  font-weight:700;
  font-size: clamp(30px, 7vw, 68px);
  color: var(--dh-white);
  opacity:.05;
  letter-spacing:.08em;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}
.dh-hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.dh-hero-copy .dh-eyebrow{ margin-bottom:20px; }
.dh-hero h1{ font-family: var(--dh-font-display); font-weight:700; font-size: clamp(40px,5.2vw,60px); line-height:1.18; color: var(--dh-white); }
.dh-hero .dh-subtitle{ font-family: var(--dh-font-display); font-weight:600; font-size:22px; color: var(--dh-gold); margin-top:10px; }
.dh-hero p.dh-lead{ margin-top:20px; font-size:17px; color: var(--dh-white-soft); max-width:480px; }
.dh-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.dh-hero-visual{ position:relative; }
.dh-hero-frame{
  position:relative;
  border-radius: var(--dh-radius-lg);
  overflow:hidden;
  aspect-ratio: 4/5;
  border: 1px solid rgba(201,162,39,.35);
  box-shadow: var(--dh-shadow-lg);
  background: linear-gradient(160deg, var(--dh-navy-card), var(--dh-navy));
}
.dh-hero-frame img{ width:100%; height:100%; object-fit:cover; }
.dh-hero-frame .dh-hero-illustration{ width:100%; height:100%; }
.dh-hero-badge{
  position:absolute; bottom:-22px; left:-18px;
  background: var(--dh-white-card);
  border-radius: var(--dh-radius-md);
  box-shadow: var(--dh-shadow-md);
  padding:15px 20px;
  display:flex; align-items:center; gap:12px;
  max-width:260px;
}
.dh-hero-badge .dh-dot{ width:9px; height:9px; border-radius:50%; background:#3FA65C; flex-shrink:0; }
.dh-hero-badge strong{ display:block; font-size:14px; color: var(--dh-ink); font-weight:700; }

/* ==========================================================================
   4. About / نبذة (خلفية كريمي، قائمة أرقام 01/02/03)
   ========================================================================== */
.dh-about{ background: var(--dh-cream); padding-block:88px; }
.dh-about-lead{ display:flex; gap:24px; margin-bottom:52px; align-items:flex-start; }
.dh-about-lead p{ color: var(--dh-ink-soft); font-size:17px; border-right:2px solid var(--dh-gold); padding-right:18px; max-width:560px; }

.dh-about-list{ display:flex; flex-direction:column; }
.dh-about-item{ display:flex; gap:26px; padding-block:26px; border-top:1px solid var(--dh-line-light); }
.dh-about-item:last-child{ border-bottom:1px solid var(--dh-line-light); }
.dh-about-num{ font-family: var(--dh-font-display); font-weight:700; font-size:20px; color: var(--dh-gold); min-width:38px; }
.dh-about-item h3{ font-family: var(--dh-font-display); font-size:19px; font-weight:700; color: var(--dh-ink); margin-bottom:8px; }
.dh-about-item p{ color: var(--dh-ink-soft); font-size:15.5px; }

/* ==========================================================================
   5. Specialties (خلفية كحلي، بطاقات بحدود، أيقونة دائرية ذهبية)
   ========================================================================== */
.dh-specialties{ background: var(--dh-navy); padding-block:96px; }
.dh-specialties-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.dh-spec-card{ padding:32px 26px; border-radius: var(--dh-radius-lg); background: var(--dh-navy-card); border:1px solid var(--dh-line-dark); }
.dh-spec-icon{
  width:52px; height:52px; border-radius:50%;
  border:1.5px solid var(--dh-gold);
  display:flex; align-items:center; justify-content:center;
  color: var(--dh-gold);
  margin-bottom:22px;
}
.dh-spec-icon svg{ width:24px; height:24px; }
.dh-spec-card h3{ font-family: var(--dh-font-display); font-size:19px; font-weight:700; color: var(--dh-white); margin-bottom:10px; }
.dh-spec-card p{ color: var(--dh-white-soft); font-size:15px; }

/* ==========================================================================
   6. Booking / Clinics — بطاقات قابلة للفتح (Accordion) + خلفية كريمي
   ========================================================================== */
.dh-booking{ background: var(--dh-cream); padding-block:96px; }
.dh-clinics-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }

.dh-clinic-card{ background: var(--dh-white-card); border-radius: var(--dh-radius-lg); border:1px solid var(--dh-line-light); overflow:hidden; }
.dh-clinic-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:26px 28px;
  text-align:right;
}
.dh-clinic-toggle-right{ display:flex; align-items:center; gap:16px; }
.dh-clinic-plus{
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--dh-line-light);
  display:flex; align-items:center; justify-content:center;
  color: var(--dh-ink);
  flex-shrink:0;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.dh-clinic-plus svg{ width:16px; height:16px; }
.dh-clinic-card.is-open .dh-clinic-plus{ transform: rotate(135deg); background: var(--dh-gold); border-color: var(--dh-gold); color: var(--dh-navy); }

.dh-clinic-meta{ text-align:right; }
.dh-clinic-meta .dh-eyebrow{ margin-bottom:8px; }
.dh-clinic-meta h3{ font-family: var(--dh-font-display); font-size:22px; font-weight:700; color: var(--dh-ink); }
.dh-clinic-days{
  display:inline-block; margin-top:10px;
  font-size:12.5px; font-weight:700; color: var(--dh-gold-dark);
  background: var(--dh-gold-soft);
  padding:6px 14px; border-radius: var(--dh-radius-full);
}
.dh-clinic-ring{ width:56px; height:56px; flex-shrink:0; }

.dh-clinic-panel{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s ease; }
.dh-clinic-panel-inner{ overflow:hidden; }
.dh-clinic-card.is-open .dh-clinic-panel{ grid-template-rows:1fr; }
.dh-clinic-body{ padding:0 28px 28px; }
.dh-clinic-address{ display:flex; gap:10px; color: var(--dh-ink-soft); font-size:14.5px; line-height:1.8; margin-bottom:22px; }
.dh-clinic-address svg{ width:20px; height:20px; flex-shrink:0; color: var(--dh-gold); margin-top:2px; }
.dh-clinic-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.dh-clinic-actions .dh-btn{ padding:11px 20px; font-size:14px; }

.dh-booking-cta{
  margin-top:40px;
  background: var(--dh-navy);
  border-radius: var(--dh-radius-lg);
  padding:44px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.dh-booking-cta-text h3{ font-family: var(--dh-font-display); font-size:26px; color: var(--dh-white); font-weight:700; }
.dh-booking-cta-text p{ color: var(--dh-white-soft); margin-top:8px; font-size:15px; }
.dh-booking-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ==========================================================================
   7. Footer
   ========================================================================== */
.dh-footer{ padding-block:64px 32px; background: var(--dh-navy); color: var(--dh-white-soft); }
.dh-footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--dh-line-dark); }
.dh-footer-about{ margin-top:18px; font-size:14.5px; line-height:1.9; max-width:340px; color: var(--dh-white-faint); }
.dh-footer h4{ font-family: var(--dh-font-display); font-size:16px; color: var(--dh-gold); margin-bottom:16px; font-weight:700; }
.dh-footer-clinic p{ font-size:14px; line-height:1.9; color: var(--dh-white-faint); margin-bottom:10px; }
.dh-footer-clinic a{ font-size:14px; font-weight:700; color: var(--dh-white); }
.dh-footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-top:24px; font-size:13px; color: var(--dh-white-faint); }
.dh-footer-bottom a{ color: var(--dh-white-soft); font-weight:600; }

/* ==========================================================================
   8. المقالات — أرشيف (Grid)
   ========================================================================== */
.dh-articles-hero{ background: var(--dh-navy); padding-block:72px 60px; position:relative; overflow:hidden; }
.dh-articles-hero .dh-section-head{ margin-bottom:0; }

.dh-cat-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.dh-cat-pill{ padding:9px 20px; border-radius: var(--dh-radius-full); font-size:14px; font-weight:600; border:1.5px solid rgba(247,244,234,.25); color: var(--dh-white-soft); }
.dh-cat-pill:hover{ border-color: var(--dh-gold); color: var(--dh-white); }
.dh-cat-pill.is-active{ background: var(--dh-gold); border-color: var(--dh-gold); color: var(--dh-navy); }

.dh-articles{ background: var(--dh-cream); padding-block:72px; }
.dh-articles-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }

.dh-article-card{ background: var(--dh-white-card); border-radius: var(--dh-radius-lg); border:1px solid var(--dh-line-light); overflow:hidden; display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease; }
.dh-article-card:hover{ transform: translateY(-6px); box-shadow: var(--dh-shadow-md); }
.dh-article-thumb{ aspect-ratio:16/11; overflow:hidden; background: var(--dh-navy-card); position:relative; }
.dh-article-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.dh-article-card:hover .dh-article-thumb img{ transform: scale(1.05); }
.dh-article-thumb-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: var(--dh-gold); opacity:.5; }
.dh-article-thumb-fallback svg{ width:44px; height:44px; }
.dh-article-cat{ position:absolute; top:14px; right:14px; background: rgba(15,33,55,.85); color: var(--dh-gold); font-size:12px; font-weight:700; padding:6px 14px; border-radius: var(--dh-radius-full); }
.dh-article-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.dh-article-date{ font-size:12.5px; color: var(--dh-ink-faint); font-weight:600; }
.dh-article-body h3{ font-family: var(--dh-font-display); font-size:19px; font-weight:700; color: var(--dh-ink); line-height:1.45; }
.dh-article-body h3 a:hover{ color: var(--dh-gold-dark); }
.dh-article-excerpt{ font-size:14.5px; color: var(--dh-ink-soft); flex:1; }
.dh-article-more{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color: var(--dh-gold-dark); margin-top:4px; }
.dh-article-more svg{ width:16px; height:16px; }

.dh-articles-empty{ text-align:center; padding-block:60px; color: var(--dh-ink-soft); }

.dh-pagination{ display:flex; justify-content:center; gap:10px; margin-top:52px; flex-wrap:wrap; }
.dh-pagination a, .dh-pagination span{ min-width:42px; height:42px; padding-inline:8px; border-radius: var(--dh-radius-full); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; border:1.5px solid var(--dh-line-light); color: var(--dh-ink); }
.dh-pagination a:hover{ border-color: var(--dh-gold); color: var(--dh-gold-dark); }
.dh-pagination .current{ background: var(--dh-navy); border-color: var(--dh-navy); color: var(--dh-white); }

/* ==========================================================================
   9. مقال فردي (Single Article)
   ========================================================================== */
.dh-single-hero{ background: var(--dh-navy); padding-block:56px 0; }
.dh-back-link{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color: var(--dh-white-soft); margin-bottom:26px; }
.dh-back-link:hover{ color: var(--dh-gold); }
.dh-back-link svg{ width:16px; height:16px; }
.dh-single-hero .dh-eyebrow{ margin-bottom:18px; }
.dh-single-hero h1{ font-family: var(--dh-font-display); font-weight:700; font-size: clamp(30px,4.2vw,46px); line-height:1.35; color: var(--dh-white); margin-bottom:24px; }
.dh-single-meta{ display:flex; flex-wrap:wrap; gap:22px; padding-bottom:40px; }
.dh-single-meta div{ display:flex; align-items:center; gap:9px; font-size:14px; color: var(--dh-white-soft); }
.dh-single-meta svg{ width:17px; height:17px; color: var(--dh-gold); }

.dh-single-thumb{ margin-top: -60px; position:relative; z-index:2; }
.dh-single-thumb img{ width:100%; border-radius: var(--dh-radius-lg); box-shadow: var(--dh-shadow-lg); aspect-ratio:16/8; object-fit:cover; }

.dh-single-body{ background: var(--dh-cream); padding-block:80px 60px; }
.dh-prose{ font-size:17.5px; line-height:1.95; color: var(--dh-ink); }
.dh-prose > * + *{ margin-top:22px; }
.dh-prose h2{ font-family: var(--dh-font-display); font-size:26px; font-weight:700; color: var(--dh-ink); margin-top:44px; }
.dh-prose h3{ font-family: var(--dh-font-display); font-size:21px; font-weight:700; color: var(--dh-ink); margin-top:36px; }
.dh-prose p{ color: var(--dh-ink); }
.dh-prose a{ color: var(--dh-gold-dark); text-decoration: underline; text-underline-offset:3px; }
.dh-prose ul, .dh-prose ol{ padding-right:22px; list-style:disc; }
.dh-prose ol{ list-style:decimal; }
.dh-prose li + li{ margin-top:8px; }
.dh-prose blockquote{ border-right:3px solid var(--dh-gold); padding:6px 22px; color: var(--dh-ink-soft); font-style:normal; background: var(--dh-white-card); border-radius: 0 var(--dh-radius-sm) var(--dh-radius-sm) 0; }
.dh-prose img{ border-radius: var(--dh-radius-md); }
.dh-prose figcaption{ font-size:13px; color: var(--dh-ink-faint); text-align:center; margin-top:8px; }

.dh-single-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:44px; padding-top:32px; border-top:1px solid var(--dh-line-light); }
.dh-single-tags a{ font-size:13px; font-weight:600; padding:8px 16px; border-radius: var(--dh-radius-full); background: var(--dh-white-card); border:1px solid var(--dh-line-light); color: var(--dh-ink-soft); }
.dh-single-tags a:hover{ border-color: var(--dh-gold); color: var(--dh-gold-dark); }

.dh-author-box{ display:flex; align-items:center; gap:18px; margin-top:44px; padding:26px; background: var(--dh-white-card); border-radius: var(--dh-radius-lg); border:1px solid var(--dh-line-light); }
.dh-author-avatar{ width:58px; height:58px; border-radius:50%; border:1.5px solid var(--dh-gold); display:flex; align-items:center; justify-content:center; font-family: var(--dh-font-display); font-weight:700; color: var(--dh-gold); flex-shrink:0; }
.dh-author-box strong{ display:block; color: var(--dh-ink); font-size:15.5px; }
.dh-author-box span{ font-size:13.5px; color: var(--dh-ink-faint); }

.dh-related{ background: var(--dh-navy); padding-block:72px; }

/* ==========================================================================
   10. Reveal animation
   ========================================================================== */
.dh-reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.dh-reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   11. Responsive
   ========================================================================== */
@media (max-width:1024px){
  .dh-hero-grid{ grid-template-columns:1fr; }
  .dh-hero-visual{ order:-1; max-width:420px; margin-inline:auto; width:100%; }
  .dh-specialties-grid{ grid-template-columns: repeat(2,1fr); }
  .dh-clinics-grid{ grid-template-columns:1fr; }
  .dh-articles-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:780px){
  .dh-nav, .dh-header-cta .dh-btn{ display:none; }
  .dh-burger{ display:flex; }
  .dh-specialties-grid{ grid-template-columns:1fr; }
  .dh-articles-grid{ grid-template-columns:1fr; }
  .dh-footer-grid{ grid-template-columns:1fr; gap:28px; }
  .dh-hero{ padding-block:44px 60px; }
  .dh-hero-badge{ position:static; margin-top:16px; max-width:none; }
  .dh-booking-cta{ padding:32px 24px; }
  .dh-about-lead{ flex-direction:column; }
  .dh-single-thumb{ margin-top:-36px; }
  .dh-single-meta{ gap:14px; }
}