/* ---------------------------------------------------------------------------
   dk-additions.css

   Styling for the blocks added during recovery: the breadcrumb trail, the
   reviewer byline, the "conditions we treat" index, the consultation call-out
   and the medical disclaimer.

   Every colour here is one of Astra's own global palette variables, which the
   theme defines in its inline <style> on every page. Nothing new is invented,
   so these blocks stay in step with the site if the palette is ever changed.
   Fallbacks are supplied for the case where that inline block is absent.
--------------------------------------------------------------------------- */

.dk-block {
  --dk-ink:     var(--ast-global-color-2, #1e293b);
  --dk-muted:   var(--ast-global-color-3, #67768e);
  --dk-tint:    var(--ast-global-color-6, #F2F5F7);
  --dk-soft:    var(--ast-global-color-4, #f9f6fe);
  --dk-brand:   var(--ast-global-color-0, #060097);
  --dk-accent:  var(--ast-global-color-7, #ffcd57);
  --dk-line:    rgba(103, 118, 142, .25);
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------- breadcrumb */
.dk-breadcrumb {
  margin-block: 18px 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--dk-muted);
}
.dk-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35em;
}
.dk-breadcrumb li { display: flex; align-items: center; gap: .35em; }
.dk-breadcrumb li + li::before { content: "\203A"; color: var(--dk-line); }
.dk-breadcrumb a { color: var(--dk-muted); text-decoration: none; border-bottom: 1px solid var(--dk-line); }
.dk-breadcrumb a:hover, .dk-breadcrumb a:focus-visible { color: var(--dk-brand); border-bottom-color: currentColor; }
.dk-breadcrumb [aria-current="page"] { color: var(--dk-ink); font-weight: 600; }

/* ------------------------------------------------------------------ byline */
.dk-byline {
  margin-block: 14px 0;
  padding: 14px 18px;
  border-inline-start: 3px solid var(--dk-accent);
  background: var(--dk-tint);
  border-radius: 0 6px 6px 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--dk-ink);
}
.dk-byline strong { font-weight: 600; }
.dk-byline .dk-byline-credentials { color: var(--dk-muted); }

/* ----------------------------------------------------- conditions we treat */
.dk-conditions { margin-block: 48px; }
.dk-conditions h2 {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.25;
  color: var(--dk-ink);
}
.dk-conditions > p {
  margin: 0 0 22px;
  max-width: 62ch;
  color: var(--dk-muted);
  line-height: 1.65;
}
.dk-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.dk-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--dk-line);
  border-radius: 10px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.dk-card:hover, .dk-card:focus-within {
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(30, 41, 59, .12);
  transform: translateY(-2px);
}
.dk-card h3 { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.dk-card h3 a { color: var(--dk-ink); text-decoration: none; }
.dk-card h3 a::after { content: ""; position: absolute; inset: 0; }
.dk-card { position: relative; }
.dk-card h3 a:hover, .dk-card h3 a:focus-visible { color: var(--dk-brand); }
.dk-card p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--dk-muted); }

/* ------------------------------------------------------------ consultation */
.dk-consult {
  margin-block: 40px;
  padding: 26px 24px;
  background: var(--dk-soft);
  border: 1px solid var(--dk-line);
  border-radius: 12px;
}
.dk-consult h2 { margin: 0 0 8px; font-size: 1.375rem; line-height: 1.3; color: var(--dk-ink); }
.dk-consult p { margin: 0 0 16px; max-width: 62ch; line-height: 1.65; color: var(--dk-ink); }
.dk-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-actions a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--dk-brand);
}
.dk-actions a.dk-primary { background: var(--dk-brand); color: #fff; }
.dk-actions a.dk-secondary { background: transparent; color: var(--dk-brand); }
.dk-actions a:hover, .dk-actions a:focus-visible { filter: brightness(1.12); }
.dk-actions a.dk-secondary:hover, .dk-actions a.dk-secondary:focus-visible { background: rgba(6, 0, 151, .06); }

/* ------------------------------------------------------------- disclaimer */
.dk-disclaimer {
  margin-block: 32px 48px;
  padding-top: 16px;
  border-top: 1px solid var(--dk-line);
  font-size: .875rem;
  line-height: 1.65;
  color: var(--dk-muted);
}
.dk-disclaimer strong { color: var(--dk-ink); }

@media (prefers-reduced-motion: reduce) {
  .dk-card { transition: none; }
  .dk-card:hover, .dk-card:focus-within { transform: none; }
}

/* ---------------------------------------------------------------------------
   Contrast corrections

   Everything below fixes text that fails WCAG AA (4.5:1 for body text) in the
   site as it was built. The values are the site's own colours moved the
   smallest distance that clears the threshold, so the design reads the same.
   Measured before / after is noted on each rule.

   These live here rather than in the recovered Elementor and Astra files so
   that those stay exactly as they were recovered and every deliberate change
   is in one auditable place.
--------------------------------------------------------------------------- */

/* The homepage's opening paragraph - the whole "Dermatology is the medical
   specialty concerned with..." block - was set to --e-global-color-astglobalcolor6,
   which is #F2F5F7: a background tint, on a container explicitly painted
   #FFFFFF. 1.09:1, i.e. invisible. Restored to the theme's own body ink.
   1.09:1 -> 14.4:1 */
.elementor-9 .elementor-element.elementor-element-9de29e3 {
  color: var(--ast-global-color-2, #1e293b);
}

/* Current-page item in the primary nav.  2.68:1 -> 4.50:1 */
.ast-builder-menu .main-header-menu > .current-menu-item > .menu-link,
.ast-builder-menu .main-header-menu > .current_page_item > .menu-link,
.ast-header-break-point .main-header-menu > .current-menu-item > .menu-link {
  color: #0F819C;
}

/* Post meta and menu links sitting on the light grey band. Astra sets these
   with `.entry-meta, .entry-meta *`, so the override has to match that reach.
   4.32:1 -> 4.51:1 */
.entry-meta,
.entry-meta *,
.ast-terms-link a {
  color: #0468CC;
}

/* The same meta line inside a related-post card, where it lands on the dark
   teal overlay instead of the grey band.  1.49:1 -> ~6.6:1 */
.ast-related-post .entry-meta,
.ast-related-post .entry-meta *,
.ast-related-posts-inner-section .entry-meta,
.ast-related-posts-inner-section .entry-meta * {
  color: #E8F1FA;
}

/* Service-card body copy.  4.29:1 -> 4.60:1 */
.elementor-widget-image-box .elementor-image-box-description {
  color: #757575;
}

/* The clinic's email address in the footer, on the teal panel. It uses the
   palette's yellow accent, which was picked for buttons rather than for text.
   Lightened rather than darkened so it stays an accent.  3.83:1 -> 4.50:1 */
.site-footer .footer-widget-area[data-section] .footer-widget-area-inner a,
.site-footer .footer-widget-area[data-section] a,
.site-primary-footer-wrap a {
  color: #FFE29D;
}

/* Footer copyright line.  4.31:1 -> 4.51:1 */
.site-footer .ast-footer-copyright p {
  color: #64738A;
}

/* The blocks added during recovery: bring the muted tone up so it clears AA
   on every background it is used against.  3.82:1 -> 4.52:1 */
.dk-block {
  --dk-muted: #5D6A80;
}

/* Links inside the blocks added during recovery inherit Astra's global link
   colour (#046BD2), which clears AA on white but not on the grey band these
   blocks sometimes sit on.  4.32:1 -> 7.06:1 */
.dk-block p a,
.dk-block li a:not(.dk-primary):not(.dk-secondary) {
  color: #0A4FA0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dk-block p a:hover,
.dk-block p a:focus-visible {
  color: var(--dk-brand);
}

/* Footer widget headings ("For Appointment", "Email") are #00D4FF on the teal
   panel. At 1440px they render at 24px and just scrape past the large-text
   threshold; at mobile widths Astra scales them to 22.8px and they no longer
   qualify, so the same colour becomes a failure.  3.22:1 -> 4.51:1 */
.site-footer .footer-widget-area[data-section] h1,
.site-footer .footer-widget-area[data-section] h2,
.site-footer .footer-widget-area[data-section] h3,
.site-footer .footer-widget-area[data-section] h4 {
  color: #BCF4FF;
}

/* The three "Happiness Numbers" counters - 40 years, 1,000 treatments,
   30,000 patients - are set to the same background tint as the hero
   paragraph (--e-global-color-astglobalcolor6, #F2F5F7) and sit on the light
   grey band, so the figures never appeared. Recoloured to the teal the
   section heading above them already uses.  1.10:1 -> 7.34:1 */
.elementor-9 .elementor-element.elementor-element-279f2d0 .elementor-counter-number-wrapper,
.elementor-9 .elementor-element.elementor-element-c1ec175 .elementor-counter-number-wrapper,
.elementor-9 .elementor-element.elementor-element-87bd67a .elementor-counter-number-wrapper {
  color: #224D57;
}