/*
Theme Name: Clinica Joelle
Template: generatepress
Author: You
Version: 2.3
*/

/* =========================================================
  Clinica Joelle — Global Stylesheet
  Loads on every page (header, footer, base type, buttons).
  Homepage-only sections live in css/front-page.css.
   ========================================================= */

@font-face {
  font-family: "Louize Display";
  src: url("fonts/LouizeDisplay.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Louize Display";
  src: url("fonts/LouizeDisplay-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Louize Display";
  src: url("fonts/LouizeDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Louize Display";
  src: url("fonts/LouizeDisplay-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Louize Display";
  src: url("fonts/LouizeDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Louize Display";
  src: url("fonts/LouizeDisplay-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg:        #efeae2;
  --surface:   #fbf9f5;
  --ink:       #2e2a26;
  --muted:     #6f675f;
  --primary:   #c2d7bf;
  --primary-deep: #aebdb0;
  --line:      #e0d9cf;
  --placeholder: #ded6ca;

  /* Fluid like the reference site: fills ~92% of the window, but stops at
     1600px so line lengths stay sane on very wide monitors. */
  --maxw: min(92vw, 1600px);
  --radius: 14px;
  --gap: 24px;

  /* Page title band — tune these two and everything follows. */
  /* Before & After case: space between the two photos, and the inset from
     the left edge of the case block. */
  --ba-gap: 96px;
  --ba-inset: 120px;

  --band-pad: 30px;      /* space between the title band and the content below */
  --band-height: 18px;   /* padding above and below the title inside the black band — lower = shorter band */
  --band-font: clamp(1.9rem, 2.6vw, 2.6rem);

  --font-display: "Louize Display", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
/* clip, not hidden: overflow-x:hidden on body turns it into a scroll container,
   so the sticky header measured its `top` from the body instead of the window.
   With the admin bar's 32px that pushed the header 32px down, over the title
   band. The `hidden` line is only a fallback for browsers without clip. */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Sticky footer: on a short page the footer is pushed to the bottom of the
     viewport instead of leaving bare background beneath it. `margin-top:auto`
     on the footer eats the leftover space, so nothing else has to stretch. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-footer { margin-top: auto; }

/* The admin bar already occupies 32px above the document. */
.admin-bar body,
body.admin-bar { min-height: calc(100vh - 32px); }

@media (max-width: 640px) {
  .logo-mark { height: 24px; }
}

@media (max-width: 782px) {
  body.admin-bar { min-height: calc(100vh - 46px); }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.8rem, 7.5vw, 5rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 0.95rem; font-family: var(--font-body); font-weight: 600; }

p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.narrow { max-width: 720px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.section { padding: 96px 0; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .8rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 2px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease, color .2s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--primary);
  color: var(--ink);
  border: 1px solid var(--primary);
}
.btn-primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); }

.btn-ghost {
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { background: var(--ink); color: #fff; }

.link-arrow {
  font-weight: 600;
  font-size: .75rem;
  text-decoration: none;
  color: var(--ink);
}
.link-arrow::after { content: " →"; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 80px;
}
.logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
}
/* The wordmark is a wide, short lockup, so height drives the size and the
   intrinsic width/height on the tag keeps the header from reflowing. */
.logo-mark {
  height: 30px;
  width: auto;
  display: block;
}
/* Centred for real, not nudged: the logo and the icon group each take an equal
   flexible share of the row, so the nav sits in the middle whatever their
   widths are. A fixed margin-left only looks centred at one screen width.
   Desktop only — below 900px the nav is the off-canvas drawer. */
@media (min-width: 901px) {
  .header-inner > .logo,
  .header-inner > .nav-icons { flex: 1 1 0; }
  .nav-icons { justify-content: flex-end; }
  .main-nav { margin-left: 0; }
}
.main-nav > ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 20px; padding: 0;
}
.main-nav a {
  text-decoration: none;
  font-size: 1 rem;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 0;
  white-space: nowrap;
}
.header-cta { margin-left: 8px; }

.nav-icons { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.cart-btn { position: relative; gap: 2px; }
.cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: .6rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.has-dropdown { position: relative; }
.has-dropdown > a::after {
  content: "⌄";
  display: inline-block;
  margin-left: 4px;
  font-size: .8rem;
  opacity: .55;
  transform: translateY(1px);
}
.dropdown {
  position: absolute;
  top: 100%;
  left: -20%;
  transform: translate(-50%, 6px);
  min-width: 210px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(46, 42, 38, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 60;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(10%, 0);
}
.dropdown li { display: block; }
.dropdown a {
  display: block;
  padding: 8px 20px;
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
}
.dropdown a:hover { background: var(--bg); }

/* Nested submenus fly out to the right of their parent item. -11px lines the
   first child up with the parent (10px list padding + 1px border). */
@media (min-width: 901px) {
  .dropdown .dropdown {
    top: -11px;
    left: 100%;
    transform: translateX(6px);
  }
  .dropdown .has-dropdown:hover > .dropdown,
  .dropdown .has-dropdown:focus-within > .dropdown {
    transform: translateX(0);
  }
  .dropdown .has-dropdown > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .dropdown .has-dropdown > a::after {
    content: "\203A";
    transform: none;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); display: block; }
.nav-close { display: none; }

/* ---- Sticky CTA ---- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(24px, 5vw, 80px);
  background: #000;
  color: #fff;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  margin: 0;
}

/* ---- Footer ---- */
.site-footer {
  background: #c2d7bf;
  color: var(--ink);
  padding: 64px 0 28px;
}
/* auto-fit rather than a hardcoded count: columns have been added and removed
   from the footer more than once, and empty tracks collapse so the remaining
   ones always share the full width. */
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}
.site-footer h5 {
  color: var(--ink);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 12px;
}
.site-footer p { margin: 0 0 6px; }
.site-footer a { display: block; margin-bottom: 8px; }
/* The column headings are links now. `.site-footer a` above makes every link
   a block with 8px below it, which would push the heading off its own
   baseline — so the ones inside an h5 opt out. */
.site-footer h5 a {
  display: inline;
  margin: 0;
  color: inherit;
  text-decoration: none;
}
.site-footer h5 a:hover { text-decoration: none; }
.footer-locations {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(46, 42, 38, .22);
}
.footer-locations-row { display: flex; gap: 48px; margin-top: 4px; }
.footer-locations-row a { margin-bottom: 0; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(46,42,38,.22);
}
.footer-bottom nav { display: flex; }
.footer-bottom a { display: inline-block; margin-left: 18px; }
.footer-social { display: flex; align-items: center; gap: 16px; }
.footer-social a { margin-left: 0; }
.footer-wordmark {
  overflow: hidden;
  padding: 20px 0 10px;
}
.footer-wordmark span {
  display: block;
}
.footer-wordmark img {
  display: block;
  width: min(100%, 620px);
  height: auto;
  margin-inline: auto;   /* centred under the columns */
}

/* =========================================================
   RESPONSIVE — global (header, footer, base type)
   ========================================================= */

@media (max-width: 1180px) and (min-width: 901px) {
  .header-inner { gap: 15px; }
  .main-nav > ul { gap: 12px; }
  .main-nav a { font-size: .7rem; }
  .header-cta { padding: 12px 18px; font-size: .65rem; }
  .nav-icons { gap: 2px; }
  .icon-btn { width: 28px; height: 28px; }
}

@media (max-width: 900px) {
  .section { padding: 60px 0; }

  /* Mobile Menu */
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .nav-icons { display: none; }

  .main-nav {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000;
    z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.3s ease; overflow-y: auto;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; }
  .nav-close {
    display: block; position: absolute; top: 24px; right: 24px;
    background: none; border: none; color: #fff; font-size: 2.5rem; cursor: pointer;
    z-index: 10000;
  }
  .main-nav > ul {
    display: flex; flex-direction: column; align-items: center;
    gap: 24px; padding: 40px 24px; width: 100%; margin-top: 40px;
  }
  .main-nav a { font-family: var(--font-display); font-size: 2.2rem; color: #fff; text-transform: capitalize; }
  .main-nav > ul > li.has-dropdown { display: flex; flex-direction: column; align-items: center; }
  .has-dropdown > a::after { opacity: .7; }
  .main-nav .dropdown {
    position: static;
    transform: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: none; box-shadow: none;
    min-width: 0;
    padding: 6px 0 0;
    text-align: center;
  }
  .main-nav .dropdown a {
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 500;
    text-transform: none;
    color: rgba(255, 255, 255, .68);
    padding: 5px 0;
  }

  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-locations-row { flex-wrap: wrap; gap: 16px 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom a { margin: 0 18px 0 0; }
  .footer-social { margin-top: 8px; }
  .footer-social a { margin-left: 0; }
}

@media (min-width: 901px) {
  .nav-close { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =========================================================
   Inner pages — GeneratePress templates + Gutenberg content.
   front-page.php never reaches these selectors; it renders its
   own full-bleed sections. Measure here matches theme.json's
   contentSize (820px) / wideSize (1100px) so the editor preview
   and the front end agree.
   ========================================================= */

.content-area {
  float: none;              /* parent theme floats this inside its #page grid, which our header.php doesn't emit */
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.site-main {
  max-width: 820px;
  margin: 0 auto;
}

.entry-header .entry-title,
.page-header .page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 .3em;
}

.entry-meta {
  color: var(--muted);
  font-size: .85rem;
  margin-bottom: 2rem;
}

.entry-content > * { margin-block: 0 1.25rem; }
.entry-content > h2 { margin-block: 2.5rem .6rem; }
.entry-content > h3 { margin-block: 2rem .5rem; }
.entry-content a { text-decoration: underline; }
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .4rem; }

/* Block alignments escape the reading measure.
   GeneratePress prints `.entry-content .alignwide { width: calc(100% + 80px) }`
   into an inline <style> in the head — same specificity as this rule but later
   in the document, so it won. The extra `.inside-article` outranks it, and the
   50%/translateX pair is what actually lets the block grow past its container
   rather than just being allowed to. */
.inside-article .entry-content .alignwide {
  width: var(--maxw);
  max-width: var(--maxw);
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}
.entry-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }

/* Archive / blog listing rhythm */
.site-main > article {
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}
.site-main > article:last-of-type { border-bottom: 0; }

.paging-navigation,
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: .9rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .content-area { padding: 48px 20px 64px; }
}

/* ---- Page title band -------------------------------------------------
   Full-width bar under the header carrying the page title, in place of
   GeneratePress's in-column .entry-title. Never renders on the homepage.
   -------------------------------------------------------------------- */
.page-title-band {
  background: #000;
  color: #fff;
  padding: var(--band-height) 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.page-title-band-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--band-font);
  line-height: 1;
  color: #fff;
  margin: 0;
}
/* Content starts flush under the band — the band is the page's top spacing. */
.page-title-band + .content-area { padding-top: var(--band-pad); }

.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

@media (max-width: 900px) {
  .page-title-band { padding: 20px 20px; }
  .page-title-band + .content-area { padding-top: 0; }
}

/* GeneratePress's "One Container" layout paints its own page wrapper white via
   `.one-container .container`. That class is also this theme's generic width
   wrapper — header, footer and the closing sections all use it — so the rule
   collides and boxes them in white. Ours is a layout helper, not a surface. */
.one-container .container {
  background-color: transparent;
}

/* ---- Before & After case (joelle/before-after-case pattern) ------------
   One case per block: title, then a single row of before photo, after photo
   and the labelled rules. Photos are a fixed size so mismatched uploads still
   line up across every case on the page.
   --------------------------------------------------------------------- */
.ba-case {
  margin-bottom: 48px;
  /* Full-bleed regardless of the block's alignment setting. A case laid out at
     the 820px content width has no room left for the legend and it collapses
     to one letter per line, so don't leave it to whoever inserts the pattern.
     Idempotent: on a block already set to Full width, 50% is 50vw and these
     margins compute to zero. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ba-case > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  margin-bottom: 24px;
}

.ba-case-row {
  gap: var(--ba-gap);
  align-items: flex-start;
}
/* The case group uses a constrained layout, which centres its children at the
   820px content width — that's what leaves a gap to the left of the photos.
   The row opts out so the pair sits against the left edge of the case. */
.ba-case > .ba-case-row {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  /* Left inset so the photos sit in from the edge of the case, matching the
     reference — the two knobs for this layout are this and --ba-gap below. */
  padding-left: var(--ba-inset);
}

.ba-case-photo {
  flex: 0 0 220px !important;   /* fixed frame, whatever the upload's shape */
  max-width: 220px;
}
.ba-case-photo .wp-block-image {
  margin: 0;
}
.ba-case-photo .wp-block-image img {
  width: 220px;
  height: 330px;
  object-fit: cover;
  display: block;
}

/* The label + rule column, level with the photos. It takes whatever width is
   left on the row, which is why the case group must be set to Full width. */
.ba-case-legend {
  align-self: center;
  /* Backstop: never let the column be squeezed thinner than its own labels. */
  min-width: 200px;
}
/* One dark rule with a label sitting the same distance above and below it. */
.ba-legend-label {
  margin: 0;
  color: var(--ink);
  letter-spacing: .02em;
}
/* Core ships `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)
   { width:100px }` — three classes of specificity. Matching it takes the
   block class plus ours, or the rule stays a short centred dash. */
.wp-block-separator.ba-legend-rule:not(.is-style-dots) {
  width: 100%;
  max-width: none;
  margin: 12px auto;
  border: 0;
  border-top: 1px solid var(--ink);
  background: none;
}

.wp-block-separator.ba-case-rule:not(.is-style-dots) {
  width: 100%;
  max-width: none;
  margin: 32px auto 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
}

@media (max-width: 781px) {
  .ba-case { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
  .ba-case-row { gap: 16px; }
  .ba-case > .ba-case-row { padding-left: 0; }
  .ba-case-photo {
    flex: 0 0 calc(50% - 8px) !important;
    max-width: calc(50% - 8px);
  }
  .ba-case-photo .wp-block-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
  }
  .ba-case-legend { flex-basis: 100% !important; }
}
/* ---------------------------------------------------------------------
   DOCTOR CARDS
   Photo + name always visible; the specialty slides open on hover. The
   reveal animates grid-template-rows 0fr -> 1fr, which is the one way to
   transition to a content-driven height without hardcoding a max-height.
   --------------------------------------------------------------------- */
/* Grid items stretch to the row's tallest by default, so without align-items
   one card opening would drag every card beside it taller too. */
.doc-grid {
  align-items: start;
  gap: 32px;
  margin-bottom: 48px;
}
/* Capped and centred. The pattern is wide-aligned, so it otherwise stretches
   to --maxw (1600px) and three cards come out ~530px each — the photos are
   3:4, which makes them over 700px tall. Four classes because the alignwide
   rule above is three, and a bare .doc-grid loses to it. The centring is
   inherited from that rule (margin-left 50% + translateX). */
.inside-article .entry-content .alignwide.doc-grid {
  width: min(1040px, 100%);
  max-width: 1040px;
}

/* Kept for any Doctor Cards inserted before this became a grid. Core ships
   `.wp-block-columns { align-items: normal !important }`, so matching it
   takes !important or the columns go on stretching. */
.doc-row {
  gap: 32px;
  align-items: flex-start !important;
  margin-bottom: 32px;
}

.doc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.doc-card:hover,
.doc-card:focus-within {
  box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
}

.doc-card .doc-card-photo { margin: 0; }
.doc-card-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.doc-card-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 20px 22px 0;
}

.doc-card-reveal {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;              /* clips the child's padding while collapsed */
  transition: grid-template-rows .35s ease;
  margin: 0 22px 20px;
}
.doc-card:hover .doc-card-reveal,
.doc-card:focus-within .doc-card-reveal { grid-template-rows: 1fr; }

.doc-card-title {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding-top: 10px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Touch devices have no hover, so the specialty is simply always visible. */
@media (hover: none), (max-width: 781px) {
  .doc-card-reveal { grid-template-rows: 1fr; }
}
/* Core prints the grid's column rule into an inline <style> after this file,
   so dropping to fewer columns on narrow screens has to be !important. */
@media (max-width: 900px) {
  .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 781px) {
  .doc-grid, .doc-row { gap: 20px; }
}

/* Core pads pullquotes 3em top and bottom, which on the reviews page reads as
   a large empty gap between one quote and the next. */
.wp-block-pullquote {
  padding: 1.2em 0;
  margin-block: 0;
}

/* The Results menu item has no href, so give it the pointer its siblings get. */
.main-nav .has-dropdown > a:not([href]) { cursor: default; }

/* ---- Treatment pages: oversized image ----
   The photo in the right-hand column grows past its column to the right, and
   the whole text + photo block shifts left by half that extra width so the
   pair stays centred on the page. Change --img-size to resize the photo; the
   shift follows automatically.
   Only on desktop; once columns stack (≤781px) it's a normal full-width image. */
@media (min-width: 782px) {
  .is-treatment-page .entry-content > .wp-block-columns {
    --img-size: 145%;
    /* Extra width = (size - 100%) of one column ≈ half the block; half of
       that again centres it, hence / 4. */
    transform: translateX(calc((100% - var(--img-size)) / 4));
  }
  .is-treatment-page .entry-content > .wp-block-columns > .wp-block-column:last-child > .wp-block-image {
    position: relative;
    z-index: 2;
    width: var(--img-size);
    max-width: none;
    margin-top: 25%;
  }
  .is-treatment-page .entry-content > .wp-block-columns > .wp-block-column:last-child > .wp-block-image img {
    width: 100%;
    height: auto;
  }
}
/* Less overhang on narrow desktops, where the page edge is closer. */
@media (min-width: 782px) and (max-width: 1100px) {
  .is-treatment-page .entry-content > .wp-block-columns {
    --img-size: 125%;
  }
}