/* ---------------------------------------------------------------------------
   Page content — Gutenberg output, including GrowthMed's custom blocks.

   Every gm-blocks/* block is STATIC: its HTML is saved in post_content and
   renders without their plugin. Only the styling was lost, and it is restored
   here from measured values. The block class names are kept exactly as the
   saved markup emits them — renaming them would mean rewriting 77 pages of
   imported content.
   --------------------------------------------------------------------------- */

.entry-content { max-width: 62.5rem; }

.entry-content > * + * { margin-top: 1.25rem; }

.entry-content h2,
.entry-content h3,
.entry-content h4 { margin-top: 2.5rem; }

.entry-content ul,
.entry-content ol { padding-left: 1.5rem; }

.entry-content li {
  color: var(--color-10);
  font-size: var(--font1-0);
  line-height: 1.9;
}

.entry-content img { height: auto; }

.entry-content .alignright { float: right; margin: 6px 0 20px 35px; }
.entry-content .alignleft  { float: left;  margin: 6px 35px 20px 0; }
.entry-content .aligncenter { margin-inline: auto; }

/* WIDTH IS THE LOAD-BEARING PART — found 5 Sep 2026 when the rhinoplasty
   page rendered its intro one letter per line. A floated figure with no
   width cap takes the image's natural width, leaving the paragraph a
   sliver (and the overflow-wrap guard then dutifully letter-breaks it).
   Live's own rules: figure.alignright/left width 50% capped 45%, 35px
   gutter, img fills the figure. 75 floated figures across ~50 pages ride
   on this. */
.entry-content figure.alignright,
.entry-content figure.alignleft {
  width: 50%;
  max-width: 45%;
}

.entry-content figure.alignright img,
.entry-content figure.alignleft img {
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .entry-content .alignright,
  .entry-content .alignleft { float: none; margin: 0 0 1.25rem; }

  /* Live un-floats figures to full width on mobile. */
  .entry-content figure.alignright,
  .entry-content figure.alignleft { width: 100%; max-width: 100%; }
}

/* --- gm-blocks/box --------------------------------------------------------
   Two variants, and the plain one is styled differently on pages and posts:
   gold panel on a page, light panel with gold text on a post. All measured.
   The `.header` modifier below overrides the plain rules, matching the source's
   own specificity order.                                                     */
.page .box {
  background: var(--color-1);
  color: var(--color-2);
  padding: 20px 15px 10px 20px;
}

.page .box p {
  font-size: 1.125em;
  color: var(--color-3);
  line-height: 1.5em;
  letter-spacing: 1px;
}

.page .box a { color: var(--color-3); font-weight: 400; }
.page .box h2 { color: var(--color-2); }
.page .box img { border: 1px solid var(--color-3); }
.page .box ul { margin-left: 20px; }

/* Content lists keep their BULLETS. The reset strips list-style from any
   classed ul, and Gutenberg stamps `wp-block-list` on every content list —
   so live showed discs where ours showed bare lines (visible in Juan
   Carlos's 14 Sep box-list screenshots). Padding restores the room the
   reset zeroed; the nested `.page .box ul li ul li { list-style:none }`
   above still wins where it applies, as on live. */
.entry-content ul.wp-block-list {
  list-style: disc;
  padding-left: 20px;
}

/* Same reset casualty for NUMBERED lists — the References ol on the
   procedure pages lost its numbers (Juan Carlos, 14 Sep). */
.entry-content ol.wp-block-list {
  list-style: decimal;
  padding-left: 20px;
}

/* --- Bootstrap grid shim for CONTENT rows -----------------------------------
   The import keeps live's .row / .col-* markup in post_content (the badge
   strip on breast-reduction is `.row > .col-xs-12.col-sm-3 × 4`), and we
   dropped Bootstrap — so the columns stacked (Juan Carlos, 14 Sep 2026).
   Only the classes the content actually uses (col-xs-12, col-sm-3/5/7,
   counted in the WXR) get widths; gutters are Bootstrap's 15px.            */
.entry-content .row {
  display: flex;
  flex-wrap: wrap;
  /* TOP-aligned: Bootstrap columns are floats, and live top-aligns them.
     The first draft used align-items:center, which pushed /contact/'s
     "Our Office" column (col-sm-5 beside the tall form) down to mid-page
     (caught by Juan Carlos 14 Sep evening). */
  align-items: flex-start;
  margin-inline: -15px;
}

.entry-content .row > [class*="col-"] {
  width: 100%;
  padding-inline: 15px;
  min-width: 0;
}

@media (min-width: 768px) {
  .entry-content .row > .col-sm-3 { width: 25%; }
  .entry-content .row > .col-sm-5 { width: 41.667%; }
  .entry-content .row > .col-sm-7 { width: 58.333%; }
}
.page .box ul li { color: var(--color-2); }
.page .box ul li ul li { list-style: none; }

.post .box {
  background: var(--color-13);
  color: var(--color-1);
  padding: 20px 15px 10px 20px;
}

.post .box p {
  font-size: 1.125em;
  color: var(--color-2);
  line-height: 1.5em;
  letter-spacing: 1px;
}

.post .box a { color: var(--color-1); font-weight: 400; }
.post .box a:hover { color: var(--color-hover-10); }
.post .box h2 { color: var(--color-2); }
.post .box img { border: 1px solid var(--color-3); }
.post .box ul { margin-left: 20px; }

/*
 * NOTE: the source sets `.post .box ul li { color: var(--color-3) }` — white
 * text on a #f7f7f7 panel, i.e. effectively invisible. Reproduced faithfully
 * rather than silently corrected, but flagged: it looks like a defect, not a
 * design choice, and is worth a look during visual QA.
 */
.post .box ul li { color: var(--color-3); }

/*
 * The source also sets `.page .box a:hover { color: var(--color-hover-2) }`.
 * That token does not exist in :root — the declaration is invalid and the
 * browser drops it, so the hover does nothing on the live site either. Not
 * reproduced; there is nothing to reproduce.
 */

.box.header {                                     /* measured */
  padding: 20px 20px 5px;
  background: var(--color-13);
}

.box.header p {                                   /* measured */
  font-size: 1.125em;
  color: var(--color-2);
  line-height: 1.7em;
  font-weight: 500;
  letter-spacing: 1px;
}

.box.header a { color: var(--color-1); }          /* measured */

/* --- gm-blocks/highlight -------------------------------------------------- */
/* The extra selectors are specificity, not decoration: the general
   `.entry-content p` body-copy rule later in this file ties a bare
   `p.highlight` and wins by order, silently flattening every highlight to
   body text (found 5 Sep 2026 while fixing the body-copy colour). Live:
   700 at 1.3em, same grey as body copy. */
.page-layout__main p.highlight,
.entry-content p.highlight,
p.highlight {                                     /* measured */
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1.7em;
}

/* --- gm-blocks/header-box ------------------------------------------------- */
h2.header-block {                                 /* measured */
  background: var(--color-1);
  color: var(--color-3);
  font-size: 2em;
  padding: 20px 20px 12px;
}

h3.header-block,
.header-block {                                   /* measured */
  background: var(--color-4);
  color: var(--color-2);
  font-size: 2em;
  padding: 20px 20px 12px;
}

/* --- gm-blocks/separator --------------------------------------------------
   The ornament is an image in the source. Kept, but as a background so it
   cannot be read as content by a screen reader.
   Since 14 Sep 2026 the element also renders between FAQ sections
   (meps_faq_questions_as_headings inserts it server-side, reproducing what
   live's script does — 7 sections, 7 separators, verified in the live DOM).
   Margin corrected to live's 40px the same day; the old 2rem was a guess.  */
.separator {
  width: 100%;
  /* height:1px is LOAD-BEARING (dropped in a consolidation, caught by Juan
     Carlos 14 Sep): the box stays a hairline and the 32px ornament OVERLAPS
     it, its white ground masking the line at centre — which is what makes
     live read as two line segments with the "me." mark between them. Let
     the box grow instead and the mark floats above an unbroken line. */
  height: 1px;
  clear: both;
  border-bottom: 1px solid var(--color-1);
  margin: 40px 0;
}

.separator::before {
  content: "";
  display: block;
  width: 100%;
  height: 32px;
  position: relative;
  top: -15px;
  background: url("../images/separator.jpg") center no-repeat;
}

/* --- gm-blocks/blockquote and core quotes --------------------------------- */
.entry-content blockquote {                       /* measured */
  border-left: 3px solid var(--color-1);
  padding: 15px 0 15px 20px;
}

/* --- yoast/faq-block ------------------------------------------------------
   Saved as static HTML, so the questions and answers survive without Yoast.
   The FAQPage JSON-LD does not — that is handled in the schema stage.        */
.schema-faq-section { margin-bottom: 1.5rem; }

.schema-faq-question {
  display: block;
  font-family: var(--font-family-2);
  font-size: var(--font1-1);
  color: var(--color-2);
}

.schema-faq-answer { color: var(--color-10); }

/* --- [pg-promo] ----------------------------------------------------------- */
.banner-promo {                                   /* measured */
  width: 100%;
  padding: 25px 0;
  min-height: 125px;
  text-align: center;
  position: relative;
  z-index: 2;
  background-color: var(--color-13);
}

.banner-promo--default { background: var(--color-1); }
.banner-promo--burntorange { background: #bf5700; }

/* "Results May Vary" pseudo-element disclaimers — live's own rules (mirror,
   verbatim; see the fuller note in gallery.css). Live scopes them:
     .page .text:after        → our .page .entry-content (the content column
                                 on PAGES only; posts are excluded, as live)
     .review-content:after    → same class, template-reviews.php
     .page .pg-promo:after    → the [pg-promo] banner variants; NOT the
                                 insurance strip (--highlight), which live
                                 also leaves unstamped                        */
.page .entry-content::after {
  content: "*Results May Vary";
  text-transform: uppercase;
  font-size: 14px;
  color: #000;
  padding: 20px 0;
  display: block;
  font-weight: 300;
  clear: both;
}

.review-content::after {
  content: "Results May Vary";
  text-transform: uppercase;
  font-size: 14px;
  color: #000;
  padding: 20px 0;
  display: block;
  font-weight: 300;
  clear: both;
}

/* --- .box-form — the grey card behind the contact form ----------------------
   Live wraps /contact/'s form in `div.box-form { background:#f7f7f7;
   padding:20px }` (measured live at 1440, 15 Sep 2026). The div is in the
   imported content; only the rule was missing (caught by Juan Carlos in the
   form side-by-sides). The JotForm iframe's own background is transparent
   (Designer CSS), so the grey reads through exactly like live's.           */
.box-form {
  background: var(--color-13);
  padding: 20px;
}

/* /insurance-breast-reduction/ #schedule-special: live centres the grey card
   inside the marble CTA band at 1000px (measured at 1440, 15 Sep 2026); on
   phones it fills the container (345 in 375, the container's own 15px pads). */
#schedule-special .box-form {
  max-width: 1000px;
  margin-inline: auto;
}

/* --- [pg-promo] before/after slider ----------------------------------------
   Live's in-content photo-pair slider (see the corrected shortcode note in
   inc/shortcodes.php — the old build deleted this section from 17 pages).
   Live measurements: section 597 wide, pairs 50/50, slick 1-per-view with
   40px full-height PNG arrows (GrowthMed's own button-prev/next.png, copied
   from the mirror), hover backdrop --background-color-2, and the
   "Results May Vary" stamp bottom-left in white — live's `.page .pg-promo:
   after` rule, verbatim. No-JS state: scroll-snap row, arrows hidden.       */
.pg-promo { position: relative; margin: 0 0 30px; }

.pg-promo__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pg-promo__viewport::-webkit-scrollbar { display: none; }
.pg-promo--js .pg-promo__viewport { overflow: hidden; }

.pg-promo__track { display: flex; }

.pg-promo__slide {
  flex: 0 0 100%;
  display: flex;
  scroll-snap-align: start;
}

.pg-promo-two-div { flex: 0 0 50%; min-width: 0; }
.pg-promo-two-div img { display: block; width: 100%; height: auto; }

.pg-promo__arrow {
  display: none;                          /* no JS → no working arrows */
  position: absolute;
  top: 0;
  z-index: 10;
  width: 40px;
  height: 100%;
  padding: 0;
  border: 0;
  text-indent: -9999px;
  overflow: hidden;
  background: url("../images/button-prev.png") no-repeat center center;
  cursor: pointer;
}
.pg-promo--js .pg-promo__arrow { display: block; }
.pg-promo__arrow--prev { left: 0; }
.pg-promo__arrow--next { right: 0; background-image: url("../images/button-next.png"); }
.pg-promo__arrow:hover { background-color: var(--background-color-2); }

.page .pg-promo::after {
  content: "Results May Vary";
  font-size: .7em;
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--color-3);
  text-shadow: 0 0 1px #000;
  padding-left: 5px;
}

.banner-promo__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.banner-promo-title {                             /* measured */
  color: var(--color-5);
  font-family: var(--font-family-2);
  font-size: 1.6em;
  line-height: 1.2em;
  padding-top: 0;
}

.banner-promo-text {                              /* measured */
  color: var(--color-5);
  font-family: var(--font-family-1);
  font-size: .925em;
  line-height: normal;
  max-width: 580px;
  margin: 0 auto;
  padding-top: 0;
}

@media (min-width: 992px) {
  .banner-promo__inner {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    text-align: left;
  }
  .banner-promo-text { margin: 0; }
}

/* --- [gm_list_pages_pictures] --------------------------------------------- */
.page-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
}

.page-card__title {
  display: block;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--font7);
  color: var(--color-2);
}

.page-card a:hover .page-card__title { color: var(--color-1); }

/* --- [toc] ---------------------------------------------------------------- */
.page-toc:empty { display: none; }

.page-toc {
  background: var(--color-13);   /* live: rgb(247,247,247), measured 5 Sep */
  padding: 20px 24px;
  margin-block: 2rem;
}

/* Hierarchical numbering, as live renders it: grey "1" / "1.1" before each
   entry (.toc_number, rgb(204,204,204) = --color-6, 5px gap), h3 rows
   indented. CSS counters on the classes toc.js already emits — the list
   itself goes unnumbered. */
.page-toc ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: meps-toc;
}

.page-toc li.page-toc__h2 {
  counter-increment: meps-toc;
  counter-reset: meps-toc-sub;
}

.page-toc li.page-toc__h3 { counter-increment: meps-toc-sub; }

.page-toc li.page-toc__h2::before,
.page-toc li.page-toc__h3::before {
  color: var(--color-6);
  font-size: 1.14em;               /* live: 18.24px against 16px links */
  margin-right: 5px;
}

.page-toc li.page-toc__h2::before { content: counter(meps-toc); }

.page-toc li.page-toc__h3::before {
  content: counter(meps-toc) "." counter(meps-toc-sub);
}

.page-toc a {
  color: var(--color-2);
  font-size: var(--font2c);
  line-height: 2;
}

.page-toc a:hover { color: var(--color-1); }

/* ---------------------------------------------------------------------------
   Interior page layout — added 19 Aug 2026 after a staging comparison found
   page.php rendering a single column with no hero and no sidebar.
   --------------------------------------------------------------------------- */

/* --- Hero (#header-box) ----------------------------------------------------
   Corrected 20 Aug 2026 against the live page. Three things were wrong:
   the title was white (it is near-black), the before/after images were squares
   (they are circles), and the CTA overlapped them (it sits below, right-aligned).
   All values below are measured from the source.

   The source also sets margin-top:134px to clear a fixed header. Ours is not
   fixed, so that is deliberately not carried over.                           */
.page-hero {
  /* production: #header-box is min-height 300 with NO padding. Ours carried
     `padding-block: 40px` at the foot of this rule, which made it 343. */
  padding: 0;
  min-height: 300px;
  background: var(--color-5) url("../images/home/page-hero.jpg") no-repeat center;
  background-size: cover;
  background-position-y: center;        /* measured — not `top`, which showed only sky */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  width: 100%;
}

@media (max-width: 767px) {
  .page-hero__inner { grid-template-columns: 1fr; text-align: center; }
}

.page-hero__title h2 {                  /* measured */
  color: var(--color-2);
  font-size: var(--font4-2);
  line-height: 1.2em;
  letter-spacing: .1em;
  margin-bottom: 25px;
}

@media (max-width: 1200px) { .page-hero__title h2 { font-size: 2em; } }
@media (max-width: 767px)  { .page-hero__title h2 { font-size: 1.6em; max-width: 240px; margin-inline: auto; } }

.page-hero__bna { margin-top: 35px; }

.page-hero__link {
  display: block;
  max-width: 304px;                     /* measured: 2 x 152 */
  margin-left: auto;
}

.page-hero .bna-slider {
  max-height: 152px;
  overflow: hidden;
}

@media (max-width: 767px) { .page-hero__link { margin-inline: auto; } }

/* The source clips the strip to one row, which also hides the BEFORE/AFTER
   captions. Kept in the markup for screen readers; clipped visually, as live. */
/* Interior pages clip the strip to one row, which also hides the BEFORE/AFTER
   captions — that is the source's behaviour on #header-box. The HOMEPAGE does
   NOT clip: measured on production, its slider has overflow:visible and the
   white captions sit below the circles. Scoped accordingly.                  */
.bna-slider {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.bna-slider-item { display: flex; flex: 0 0 auto; }

.bna-slider-item__side {
  position: relative;
  max-width: 152px;
  width: 100%;
  margin: 0;
  text-align: center;
}

.bna-slider-item__side img {            /* measured — circular crop */
  width: 100%;
  max-width: 152px;
  max-height: 152px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.bna-slider-item__side figcaption {
  font-size: var(--font8);
  letter-spacing: .2em;
  color: var(--color-3);
  text-transform: uppercase;
  margin-top: 4px;
}

.page-hero__cta {                       /* measured */
  padding: 17px 20px;
  min-width: 272px;
  margin-left: auto;
}

@media (max-width: 1200px) {
  .bna-slider { max-height: 102px; }
  .page-hero__link { max-width: 204px; }
  .page-hero__cta { padding: 10px 20px; min-width: 200px; }
}

@media (max-width: 767px) {
  .page-hero__cta { margin-inline: auto; min-width: 145px; font-size: .8em; }
}

/* --- Two-column body ------------------------------------------------------- */
/* INTERIOR PAGE BODY IS 1170 WIDE, NOT THE FULL CONTAINER.
   Measured on production's /about/ at 1440: the header, the header-box strip
   and the footer all run to the full 1440, but the two-column body sits in a
   1170 container — Bootstrap's fixed .container at ≥1200, which the source only
   overrides to full width on the FRONT page (`html.front-page .container`) and
   for #top / footer.

   Ours ran the body at 1400, so main measured 903 against production's 780 and
   the sidebar 451 against 390. Every measure inside was consequently wrong. */
.page-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;   /* source: col-md-8 + col-md-4 */
  gap: 0;                 /* production's columns abut: 780 + 390 = 1170 exactly */
  align-items: start;
  /* NO top padding: live's container has none — the 40px on col-md-8 is the
     whole gap. The old 46px here STACKED on that 40 and pushed every interior
     page's content 46px lower than live (promo-strip → breadcrumbs measured
     125px against live's 72; caught by Juan Carlos 14 Sep 2026). The 46px
     bottom is kept pending its own measurement — do not re-add the top. */
  padding: 0 0 46px;      /* no side padding — the columns carry their own */
  max-width: 1170px;
}

/* Bootstrap gutters, which is where production's inner spacing comes from. */
.page-layout__main { padding-right: 15px; }
.page-aside { padding-left: 15px; padding-right: 15px; }   /* 390 - 30 = 360 tile */

@media (max-width: 991px) {
  .page-layout { padding-inline: 20px; }
  .page-layout__main,
  .page-aside { padding-left: 0; padding-right: 0; }
  .page-aside { margin-top: 40px; }
}

@media (max-width: 991px) {
  .page-layout { grid-template-columns: 1fr; }
}

/* --- Sidebar --------------------------------------------------------------- */
.page-aside > * + * { margin-top: 34px; }

/* STICKY CONTACT FORM — live affixes the .sidecar (Bootstrap affix: static →
   fixed at top:101px below the pinned header → docked at the column bottom).
   position:sticky reproduces that whole lifecycle natively. The column must
   stretch to the row height or sticky has no room to travel — .page-layout
   is align-items:start, so the aside opts back in. Caught by Juan Carlos
   14 Sep 2026. The 120px clears our scrolled header like live's 131 clears
   its 101px one. */
.page-aside,
.gallery-sidebar { align-self: stretch; }

.aside-contact { position: sticky; top: 120px; }

/* Corrected 14 Sep 2026 against /plastic-surgery-new-york/breast/: live's
   child-page list is a grey PANEL (--color-13 ground, 50px below), title
   padded 35/25/20 inside it, items as full-width block links in sentence
   case — not the uppercase underlined rows this block used to draw. Hover
   and the current page both flip to a black row (gold hover text, white
   current text). Values are live's own .page-list rules.                    */
.page-list {
  background: var(--color-13);
  padding-bottom: 20px;
  margin-bottom: 50px;
  overflow: hidden;
}

.page-list__title {
  font-family: var(--font-family-2);
  font-size: 2.4em;
  color: var(--color-2);
  text-align: left;
  margin: 0;
  padding: 35px 25px 20px;
}

.page-list ul,
.aside-procedures ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-list li { margin: 0; padding: 0; }

.page-list li a {
  display: block;
  width: 100%;
  padding: 13px 25px;
  color: var(--color-2);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 1px;
}

.page-list li a:hover {
  background: #000;
  color: var(--color-hover-10);
}

.page-list li.current_page_item a {
  background: #000;
  color: var(--color-3);
}

/* LEGACY — these procedures were a plain text list before the markup changed to
   production's image tiles. The padded/boxed link styling below is what that
   list needed and is wrong for a tile: it inset the image to 324x412 inside a
   360x444 tile and added 8px under it.
   Kept only for the hover colour, which still applies to the tile. */
.aside-procedures li a:hover .aside-procedures__title { color: var(--color-1); }

/* --- [toc] "Contents" box -------------------------------------------------- */
.page-toc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.page-toc__title {
  font-family: var(--font-family-2);
  font-size: var(--font1-1);
  color: var(--color-2);
}

/* Live's toggle is a gold PILL, not a text link — measured on the anchor
   inside .toc_toggle: gold bg, white 500 uppercase 16px, ls .8px, radius
   50px, padding 0 20px, ~23px tall. Ours is a real <button>, so the border
   reset is load-bearing. */
.page-toc__toggle {
  background: var(--color-1);
  color: var(--color-3);
  border: 0;
  border-radius: 50px;
  padding: 2px 20px 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  line-height: 21px;
  cursor: pointer;
}

.page-toc__toggle:hover {
  background: var(--color-3);
  color: var(--color-1);
}

.page-toc__h3 { margin-left: 1.25rem; }

/* --- .hide -----------------------------------------------------------------
   Live carries content it does not show: the procedure hub pages each hold a
   full-width lead figure (`<figure class="wp-block-image size-large hide">`)
   that GrowthMed suppresses with exactly these two rules. We import the same
   content, so without them the hidden image renders at full column width —
   found on /plastic-surgery-new-york/breast/, 14 Sep 2026. Copied verbatim. */
.hide { display: none !important; }
.wp-block-image img.hide { visibility: hidden; }

/* --- Locations subtitle -----------------------------------------------------
   The italic line under the h1 ("Consultations offered at our two convenient
   locations…"), printed by page.php on every page without the disable meta.
   Live rule: `.page p.locations-sub-title` — italic 1.2em weight 300,
   near-black, 1.2em line-height. It sits in header.post-title, outside
   .entry-content, so the body-copy rule never reaches it.                    */
/* The layout selector is needed to outrank `.page-layout__main p` (the
   interior body-copy rule further down) — a bare `p.locations-sub-title`
   ties and loses on order. */
.page-layout__main p.locations-sub-title,
p.locations-sub-title {
  font-style: italic;
  font-size: 1.2em;
  font-weight: 300;
  color: var(--color-2);
  line-height: 1.2em;
  margin: 0 0 10px;
}

/* --- [gm_list_pages_pictures] ----------------------------------------------
   Two-column grid of image tiles with the page title overlaid. Measured from
   the source: 170px tall, cover-cropped, gold scrim behind the label.
   The source's Bootstrap .row/.col-sm-6 wrappers are replaced by grid.       */
/* Production: tiles are 350 wide with a 30px gutter inside a 760 row.
   `minmax(0, 350px)` caps them at production's width instead of letting them
   stretch to fill — ours were 373. */
.subpage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 350px));
  gap: 30px;
  justify-content: start;
  margin-block: 24px;
}

/* 767, not 575 — Bootstrap 3 `xs` boundary. See the note in gallery.css. */
@media (max-width: 767px) { .subpage-grid { grid-template-columns: 1fr; } }

.subpage-box {
  /* 194, not 170. Measured on production's /about/ at 1440: tiles are 350x194.
     170 came from the ≤1200 rule (`.subpage-box { height: 170px }`) being read
     as the base value — it is the SMALL-screen height, not the default. */
  position: relative;
  height: 194px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 5px 1px #969696;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.subpage-box:hover {
  box-shadow: 0 0 10px 3px #969696;
  transform: scale(1.02);
}

.subpage-box img {                                /* measured */
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

/* The label is NOT a bottom caption bar — live centres it over the whole
   tile: a gold rgba(204,167,98,.6) scrim on an ::after (z-index -1, so it
   shrinks WITH the label) and the link as a flex-centred overlay,
   capitalised, letter-spaced .2em, white with a heavy text-shadow.

   HOVER CHOREOGRAPHY restored 14 Sep 2026 at Juan Carlos's request (the
   first fix flattened it): live runs two keyframe animations on hover —
   `subpage-box-moveUp` slides the full gold cover up and off the tile,
   revealing the photo, while `subpage-box` (delayed .2s, listed last so its
   forwards-fill wins the shared properties) raises a compact label from
   below and docks it at bottom:0 as a gold band under the white text.
   Mouse-out re-applies the base animation `subpage-box-2`, dropping the
   centred label back in. Keyframes and both rules are live's own, verbatim
   (the 25px/16px font sizes inside them included); only the class names
   differ. Under prefers-reduced-motion the tile stays in its resting state. */
.subpage-text {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  height: 194px;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  text-align: center;
  color: var(--color-3);
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: .2em;
  text-transform: capitalize;
  text-shadow: 2px 2px 8px #000;
  text-decoration: none;
  animation: subpage-box-2 .6s ease-in-out forwards;
}

.subpage-text::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(204, 167, 98, .6);             /* measured */
  transition: all .3s ease-out;
}

.subpage-box:hover .subpage-text {
  height: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  bottom: 150%;
  transform: translate(-50%, -100%);
  animation:
    subpage-box-moveUp .6s ease-in-out forwards,
    subpage-box .2s ease-in-out .2s forwards;
}

@keyframes subpage-box-moveUp {
  from { bottom: 50%;  transform: translate(-50%, 50%); }
  to   { bottom: 150%; transform: translate(-50%, -100%); }
}

@keyframes subpage-box {
  0%   { opacity: 1; bottom: -50%; font-size: 16px; height: auto; }
  100% { opacity: 1; bottom: 0; transform: translate(-50%, 0); font-size: 16px; height: auto; }
}

@keyframes subpage-box-2 {
  from { bottom: 150%; font-size: 25px; }
  to   { bottom: 50%;  font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .subpage-text,
  .subpage-box:hover .subpage-text {
    animation: none;
    height: 194px;
    bottom: 50%;
    transform: translate(-50%, 50%);
  }
}

/* Full-width variant for pages whose live counterpart has no aside —
   /contact/ and both location pages. See template-nosidebar.php. */
.page-layout--full { grid-template-columns: 1fr; }

/* --- Footer ----------------------------------------------------------------
   Measured off production 20 Aug 2026 at a 1440 viewport:
     footer      background #000, text gold, padding 110px 0 60px
     row         5 / 2 / 5 columns (41.667% / 16.667% / 41.667%)
     mark        186x92, 12px side margins, centred in its column
     addresses   20px Montserrat, gold
     connect     centred, uppercase, li padding 0 19px, margin -7px 0 25px
     menu        centred, uppercase, 20px, li padding 0 25px, margin-top 16px
     rule        1px gold full-bleed, margin 25px 0 21px
     copyright   16px, left aligned

   The previous build stacked all of this in a single column and shipped the
   social links with no icon at all — just a screen-reader span.               */
.site-footer {
  background: var(--color-2);
  color: var(--color-1);
  padding: 110px 0 60px;
}

.site-footer a { color: var(--color-1); }
.site-footer a:hover { color: var(--color-hover-10); }

/* nowrap: at 41.667 + 16.667 + 41.667 the three columns total exactly 100%,
   and any rounding tipped the third onto its own row — which put the Queens
   address under the Manhattan one instead of opposite it. */
.site-footer__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.site-footer__col { padding: 0 15px; }
.site-footer__col--address { flex: 0 0 41.667%; max-width: 41.667%; }
.site-footer__col--mark    { flex: 0 0 16.667%; max-width: 16.667%; }

.site-footer__logo { display: block; }

.site-footer__logo img {
  display: block;
  width: 186px;
  height: auto;
  margin: 0 12px;
}

/* 20px, not var(--font3). Production measures 20px on the addresses, the
   connect row and the menu, and 16px on the copyright. An earlier build reached
   for --font3 (2em = 32px) and --font2 (1.438em = 23px), which rendered the
   whole footer roughly 60% oversized — the menu alone spanned the full 1400px
   instead of ~770. These are em-based tokens; check what they resolve to. */
/* The list reset in reset.css sits inside :where() so it cannot outrank these
   single-class rules — see the note there. Before that it did, and this
   padding computed to 0. */
.site-footer__address {
  /* padding, not margin: as the column's first child its top margin collapses
     out and the address sat flush with the logo instead of 16px below it. */
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  font-size: var(--font1-1);
  line-height: 1.35;
}

/* The Queens column is right-aligned on production, mirroring Manhattan on the
   left. Both were left-aligned here, which left the right column floating in
   the middle of its own half. */
.site-footer__row > .site-footer__col--address:last-child { text-align: right; }

.site-footer__address li + li { margin-top: 6px; }
.site-footer__address-link { display: block; }
.site-footer__address-line { display: block; }

.site-footer__phone a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.site-footer__col--address:last-child .site-footer__phone a { flex-direction: row; }
.meps-icon--phone { flex: 0 0 auto; }

.site-footer__connect,
.site-footer__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  list-style: none;
  font-size: var(--font1-1);
  text-transform: uppercase;
}

/* Vertical rhythm measured off production, as offsets from the footer's top:
     logo column   110 → 202
     address       126 → 219   (margin-top 16)
     connect       263 → 303   → 44px below the address block
     menu          344 → 380   → 41px below connect
     rule          405 → 406   (margin 25 / 21)
     copyright     427 → 457
   Production reaches those gaps through Bootstrap row wrappers we do not have,
   so the gaps are set directly. Copying its `-7px` connect margin without the
   wrappers left the footer ~104px short. */
/* PADDING, not margin. A top margin on .site-footer__menu collapses out
   through its <nav> parent, and the one on .connect collapsed against the row
   above — the measured gaps were 22px and 0 instead of 44 and 41. Padding
   cannot collapse, so the rhythm holds. */
.site-footer__connect { margin: 0; padding-top: 44px; }
.site-footer__connect li { padding: 0 19px; margin-bottom: 16px; }

.site-footer__nav { padding-top: 41px; }
.site-footer__menu { margin: 0; }
.site-footer__menu li { padding: 0 25px; }

/* Production computes fill:black on the <svg> and sets the gold on the <path>
   inside, which is why the icons are not invisible on a black footer. Ours are
   inline SVG on currentColor, so the gold comes from .site-footer a above. */
.site-footer__connect-icon a { display: flex; align-items: center; }
.site-footer__connect-icon svg { height: 24px; width: auto; fill: currentColor; }

.site-footer__rule {
  height: 1px;
  background: var(--color-1);
  margin: 25px 0 21px;
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--font1);
  line-height: 30px;      /* measured: production 16px/30px */
  color: var(--color-1);       /* gold, like the rest of the footer */
  text-align: left;
}

/* Bottom row: copyright left, reviews widget right — production's two
   col-sm-6 halves. Below 768 both centre and stack, widget 20px below,
   matching live's `footer .stars` rules.                                 */
.site-footer__bottom {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-footer__bottom > * { flex: 1 1 50%; }

/* Flex, not text-align: the widget mounts a BLOCK (.es-embed-root), which
   text-align cannot push to the edge — measured on staging sitting mid-column.
   flex-end moves the block itself flush right regardless of the width the
   badge takes after the dashboard restyle. */
.site-footer__reviews {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .site-footer__bottom { flex-wrap: wrap; gap: 0; }
  .site-footer__bottom > * { flex: 0 0 100%; }
  .site-footer__reviews { margin-top: 20px; justify-content: center; }
}

/* Agency credit runs INLINE after the copyright, as production sets it. */
.site-footer__credit { margin-left: .35em; }

.site-footer__credit a { text-decoration: none; }
.site-footer__credit a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .site-footer { padding: 60px 0 40px; }
  .site-footer__row { flex-wrap: wrap; }
  .site-footer__col--address,
  .site-footer__col--mark { flex: 0 0 100%; max-width: 100%; text-align: center; }
  .site-footer__col--mark { order: -1; margin-bottom: 24px; }
  .site-footer__logo img { margin: 0 auto; }
  .site-footer__address { margin-top: 24px; }
  .site-footer__menu li { padding: 0 12px; }
  .site-footer__copyright { text-align: center; }
}

/* Production: `@media (max-width:1200px) { footer ul { margin-top: 18px } }` */
@media (max-width: 1200px) {
  .site-footer ul { margin-top: 18px; }
}

/* Footer, from production's own rules. */
@media (max-width: 991px) {
  .site-footer__connect { padding-top: 20px; }
}

@media (max-width: 767px) {
  .site-footer { padding: 40px 0 120px; }
  .site-footer ul,
  .site-footer__copyright { text-align: center; }
  .site-footer__connect,
  .site-footer__menu { flex-wrap: wrap; }
  .site-footer__connect { padding-top: 40px; }
  .site-footer__logo img { margin: 50px auto; }
  .site-footer__col--address:last-child { text-align: center; }
  .site-footer__phone a { justify-content: center; }
}

/* --- Grid/flex items must be allowed to shrink -----------------------------
   A grid or flex item defaults to `min-width: auto`, which means it cannot
   shrink below its content's MIN-CONTENT width. Any content wider than the
   track then widens the item and scrolls the whole page.

   Two real cases on this project, same root cause, different triggers:
     - the gallery root, where a horizontal strip's intrinsic width is the sum
       of all its tiles (1890px), giving 1210px of page scroll at 700
     - /about/dr-ruya-zhao/, which carries a 68-character unbroken CJK string.
       With no spaces it is a single token, so min-content is the whole run —
       62px of page scroll at 375

   min-width:0 lets the item take its track. The wrapping guard below then
   handles the content itself: CJK, long URLs and unbroken identifiers have no
   break opportunity and would otherwise still overflow their own column. */
.page-layout__main,
.page-layout__aside { min-width: 0; }

/* WHEREVER PROSE CAN LAND, not just the main column.
   Scoping this to .page-layout__main was enough for /about/dr-ruya-zhao/ — all
   122 of its CJK text nodes sit there — but that is luck, not design. The site
   carries 164 runs of Chinese-language patient testimonial copy (longest 217
   characters, confirmed identical on live and staging), and testimonials also
   appear in sidebars, cards, sliders and the footer. CJK has no break
   opportunities: unguarded, it overflows rather than wraps.

   `anywhere` rather than `break-word` on purpose — only `anywhere` reduces the
   element's MIN-CONTENT width, which is the property that lets a grid or flex
   item shrink. `break-word` would wrap the visible text and still leave the
   item too wide. */
.page-content,
.entry-content,
.page-layout__main,
.page-layout__aside,
aside,
blockquote,
.home-testimonial,
.home-testimonials__track,
.home-split__body,
.home-doctor__body,
.home-card,
.site-footer,
.patient-item,
.gallery-case__body { overflow-wrap: anywhere; }

/* Tables and pre are the other two things that refuse to shrink. Give them
   their own scroller rather than letting them widen the page. */
.entry-content table,
.page-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.entry-content pre,
.page-content pre { overflow-x: auto; }

/* --- Sidebar procedure tiles ----------------------------------------------
   Production runs these as a slick slider showing ONE tile at a time: items
   360x444 inside a 390 column, images the same four the homepage cards use.
   Built as a scroll-snap row for the same reason as the homepage carousel —
   no library, and it stays usable without JS. */
.aside-procedures__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  min-width: 0;
}

.aside-procedures__list::-webkit-scrollbar { display: none; }

.aside-procedure {
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: start;
}

/* The 8px was an inherited `margin-bottom` on the sidebar link, and the image
   was 412 rather than 444 because the same rule adds `padding: 16px 18px`.
   Reset both here — measured, not guessed: two earlier attempts blamed the
   inline baseline and changed nothing. */
.aside-procedure a {
  display: block;
  position: relative;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

/* 444 is the whole TILE on production, with the label overlaid on the image —
   not the image plus a label beneath. */
.aside-procedure a { height: 444px; }

.aside-procedure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Live's .item-title, measured at an EMULATED 1440 (14 Sep 2026 — an
   unemulated pane reads the ≤991 fluid calc and lies): 30px Montserrat 600
   uppercase, no letter-spacing, 20px vertical padding, 1px white underline,
   width calc(100% - 77px) centred, bottom edge 53px above the tile's.       */
.aside-procedures__title {
  line-height: 1.2;    /* explicit: a zeroed line-height collapsed the label */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 77px);
  bottom: 53px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-3);
  text-align: center;
  color: var(--color-3);
  font-family: var(--font-family-1);
  font-size: var(--font2-2);            /* 1.875em = live's 30px */
  font-weight: 600;
  text-transform: uppercase;
}

/* The placeholder .aside-testimonials rules were removed 31 Aug 2026 (0.62.0)
   with the markup they styled; the aside now renders the real #side-review-box
   (template-parts/aside-testimonials.php), styled further down this file with
   production's own values — gold ground, white title/text. The old comment's
   "dark ground" was the placeholder's guess; the live rule is
   background: var(--color-1). */

@media (max-width: 991px) {
  .aside-procedure img { height: 320px; }
}

/* Production drops these to 170 below 1200, which is where the 170 above
   originally came from. The page-list title drops with it in the same tier
   (live: 2.4em → 1.625em, top padding 35 → 25). */
@media (max-width: 1200px) {
  .subpage-box { height: 170px; }
  .page-list__title { font-size: 1.625em; padding-top: 25px; }
}

/* ===========================================================================
   INTERIOR PAGE TYPE SCALE — measured on production's /…/body/tummy-tuck/
   at 1440. Applies to every interior page, which is why it is worth getting
   exactly right rather than per-page.

     .col-md-8   padding 40px 35px 0 15px  → content measure 730 inside 780
     h1          Poiret One 54 / 60, padding-bottom 25, rgb(18,18,18)
     h2          Poiret One 42 / 46
     h3          Poiret One 29 / 32
     body copy   Montserrat 19 / 23, margin-bottom 30, near-black

   Ours had h1 at 38 with no line-height, body at 21/35, and body copy in GREY
   (#7f7f7f). Grey body copy is correct on the HOMEPAGE; interior pages are
   near-black. The two had been conflated.
   =========================================================================== */
.page-layout__main {
  padding: 40px 35px 0 15px;
}

.page-layout__main h1,
.page-content > h1,
.post-title h1 {
  font-family: var(--font-family-2);
  font-size: 54px;
  line-height: 60px;
  letter-spacing: 2px;
  color: rgb(18, 18, 18);
  margin: 0;
  padding-bottom: 25px;
}

.page-layout__main h2,
.entry-content h2 {
  font-family: var(--font-family-2);
  font-size: 42px;
  line-height: 46px;
  color: rgb(18, 18, 18);
}

.page-layout__main h3,
.entry-content h3 {
  font-family: var(--font-family-2);
  font-size: 29px;
  line-height: 32px;
}

.page-layout__main p,
.entry-content p {
  /* Measured on live's interior body copy 5 Sep 2026 (rhinoplasty, 1440):
     18px / 28.8px, weight 500, rgb(127,127,127) — which is exactly what
     --color-10 was extracted for ("body copy grey — the default <p>
     colour"). The old values here (19/23, near-black) were another
     surface's, and Juan Carlos spotted the darkness against live. */
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 30px;
  color: var(--color-10);
}

@media (max-width: 991px) {
  .page-layout__main { padding: 30px 0 0; }
  .page-layout__main h1,
  .page-content > h1,
  .post-title h1 { font-size: 38px; line-height: 42px; padding-bottom: 18px; }
  .page-layout__main h2,
  .entry-content h2 { font-size: 32px; line-height: 36px; }
  .page-layout__main h3,
  .entry-content h3 { font-size: 24px; line-height: 28px; }
}


/* ------------------------------------------------------------------ */
/* /reviews/ — the review list (template-reviews.php).                 */
/* The live equivalents ship as an inline <style> from the gm-reviews  */
/* plugin: .review-entry h3 24px, separator .line 1px #eee, stars      */
/* orange. Stars there are Font Awesome glyphs; ours are inline SVGs   */
/* sized to the same 1em type box.                                     */

.review-entry h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.review-entry .line {
  clear: both;
  height: 1px;
  background: #eee;
  margin: 15px 0;
}

.review-summary { margin-bottom: 15px; }

.review-star {
  width: 1em;
  height: 1em;
  fill: orange;
  display: inline-block;
  vertical-align: -0.115em;
}

/* The date line sits between the stars and the first paragraph; the    */
/* body's own <p> margins carry the rest of the rhythm.                 */
.review-body { margin-top: 15px; }

/* ------------------------------------------------------------------ */
/* Testimonials aside box (template-parts/aside-testimonials.php).     */
/* Values are production's: gold box, white centred text, uppercase    */
/* reviewer. Live runs it as a Slick slider (one quote at a time with  */
/* dots); ours stacks all four — the list is the slider's no-JS state, */
/* same convention as the procedures slider. Base padding 60px 40px    */
/* with live's 40px 20px below 768.                                    */

#side-review-box {
  background: var(--color-1);
  padding: 60px 40px;
  position: relative;
  margin-bottom: 50px;
}

#side-review-box h2,
.side-review-text,
.side-reviewer { color: var(--color-3); }

/* The aside sits outside .page-layout__main, so the interior type scale
   never reaches this h2 — without its own sizes it rendered at the base h2
   size, visibly smaller than live (caught by Juan Carlos 14 Sep). Live at
   1440: Poiret One 41.6px / 45.76, letter-spacing .05em, 25px below.        */
h2.side-review-title {
  text-align: center;
  font-family: var(--font-family-2);
  font-size: 2.6em;                     /* live's 41.6px */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .05em;
  margin: 0;
  padding: 0 0 25px;
}

.side-review {
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.side-review a { color: var(--color-2); }

.side-review-text {
  font-size: var(--font1-0);
  line-height: 1.6em;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 25px 0;
  font-weight: 500;
  font-family: var(--font-family-1);
}

.side-reviewer {
  font-size: var(--font1-0);
  line-height: 1.4em;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}

.side-review + .side-review { margin-top: 30px; }

/* --- Aside rotators (assets/js/rotators.js) --------------------------------
   Live runs the testimonials AND the procedure tiles as Slick sliders — one
   slide at a time, auto-advancing (options read off the live page 14 Sep
   2026: quotes 4s/300ms, tiles 3s/500ms + pause on hover). The PHP-rendered
   states (stacked quotes, scroll-snap tile row) are the no-JS fallbacks; the
   script adds these classes. Transition durations are set inline by the
   script, per instance.                                                      */
.rotator-viewport { overflow: hidden; }

.rotator-track {
  display: flex;
  /* The tile list arrives as a scroll-snap row — neutralise that in slider
     mode so transform, not scroll, moves it. */
  overflow: visible !important;
  scroll-snap-type: none;
}

.rotator-track--no-anim { transition: none !important; }

.rotator-track > * {
  flex: 0 0 100%;
  min-width: 100%;
}

/* The stacked-list gap must not apply between slides in a row. */
.rotator-track .side-review + .side-review { margin-top: 0; }

/* Dots: live's computed styles — 7px rounds, 5px side margins, CENTRED
   (flex justify-content on the row; the ul's text-align:left is a decoy —
   reading it instead of the flex alignment shipped these left-aligned once,
   caught by Juan Carlos 14 Sep). Colours differ per surface: white/
   black-active inside the gold box, grey/salmon-active (#959595 /
   rgb(214,149,125)) on the white ground under the tiles. Live puts 50px
   under the tile dots; the aside's own 34px block gap stands in for it.     */
.rotator-dots {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
}

.rotator-dots li { margin: 0 5px; }

.rotator-dots button {
  display: block;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50px;
  font-size: 0;
  cursor: pointer;
}

.rotator-dots--reviews { margin: 25px 0 0; }
.rotator-dots--reviews button { background: var(--color-3); }
.rotator-dots--reviews li.is-active button { background: var(--color-2); }

/* The ul selector is needed to outrank `.aside-procedures ul { margin: 0 }`
   above — the bare class tied and lost, leaving the dots glued to the photo
   (caught by Juan Carlos 14 Sep). Live: 20px above, 50px below (the 50
   collapses with the aside's 34px block gap, so 50 is what renders).       */
ul.rotator-dots--procedures { margin: 20px 0 50px; }
.rotator-dots--procedures button { background: #959595; }
.rotator-dots--procedures li.is-active button { background: rgb(214, 149, 125); }

@media (max-width: 767px) {
  #side-review-box { padding: 40px 20px; }
}

/* ------------------------------------------------------------------ */
/* Podium bubble, mobile position — production's own rule. The bubble  */
/* itself is rendered by Podium's script (embed in inc/tracking.php)   */
/* and ONLY on domains allowed in Podium's dashboard: production shows */
/* it, staging/local mount an empty container. Verified 1 Sep 2026 by  */
/* loading both at the same minute — script, session and container all */
/* present on ours; Podium withholds the UI off-production. So this    */
/* rule is unverifiable until the domain points at us; it is lifted    */
/* verbatim from live's CSS.                                           */
@media (max-width: 767px) {
  #podium-bubble { bottom: 46px !important; right: -20px !important; }
}

/* ------------------------------------------------------------------ */
/* Gallery hero variant (page-hero.php, variant "gallery").            */
/* Production: every gallery surface (root, category, case) renders    */
/* #header-box.gallery-bg — the title over a photo of both surgeons,   */
/* NO strip, NO CTA; min-height 300 desktop, 56px at the mobile tier.  */
/* The background is an uploads file (in the media package), served    */
/* root-relative like the gallery images.                              */
.page-hero--gallery {
  background: var(--color-5)
    url("/wp-content/uploads/sites/238/2025/11/everett-ruya-centered-header@2x-scaled.jpg")
    no-repeat center top / cover;
}

/* CORRECTED 15 Sep 2026 (gallery pass with Juan Carlos): the 56px "mobile
   tier" this carried was NOT what live renders — live at 375 measures the
   full 300px band with the two-surgeons photo visible, same as desktop.
   Wherever the 56 came from, the rendered page contradicts it. The title
   sits TOP-LEFT over the sky area on live's phone band, not centred over
   the surgeons' faces. */
@media (max-width: 767px) {
  .page-hero--gallery {
    min-height: 300px;
    height: auto;
    align-items: flex-start;
  }
  .page-hero--gallery .page-hero__inner {
    text-align: left;
    padding-top: 25px;
  }
  .page-hero--gallery .page-hero__title h2 {
    margin-inline: 0;
    margin-bottom: 0;
  }
}

/* Post featured image — production: 1024-wide rendition under the h1,
   full column width. */
.post-single__featured { margin-bottom: 30px; }
.post-single__featured img { width: 100%; height: auto; }

/* ------------------------------------------------------------------ */
/* JotForm embed container (/contact/, via the [contact-form-7]        */
/* shortcode handler). The iframe is cross-origin: field styling lives */
/* in JotForm's Form Designer Custom CSS, authored in the 5 Sep brief. */
/* The theme owns only the slot — full content width, the same         */
/* vertical rhythm live gave the form band.                            */
.jotform-embed { margin-block: 30px 0; }

.jotform-embed iframe { width: 100% !important; }

/* ------------------------------------------------------------------ */
/* Aside "Contact Us" form (template-parts/aside-contact.php) — live's */
/* .sidecar, last block of every aside. Measured live 14 Sep 2026:     */
/* margin 30/40, padding 40, transparent; h2 is Poiret One 41.6px,     */
/* centred, near-black — the testimonials title's metrics in black.    */
/* The affix scroll-pinning rules live carries are deliberately NOT    */
/* reproduced (Bootstrap-JS-driven; we have no Bootstrap JS).          */
.aside-contact {
  margin: 30px 0 40px;
  padding: 40px;
  /* Live's box, measured 14 Sep: 1px gold border over its own marble asset
     (siderbar-contact-bg.jpg — GrowthMed's filename typo kept so the asset
     stays findable against the source), cover. Copied from the live theme's
     static dir like the home images were. */
  border: 1px solid var(--color-1);
  background: url("../images/siderbar-contact-bg.jpg") center / cover no-repeat;
}

.aside-contact__title {
  font-family: var(--font-family-2);
  font-size: 41.6px;
  line-height: 1.1;
  letter-spacing: 2.08px;
  font-weight: 400;
  color: var(--color-2);
  text-align: center;
  margin: 0;
}

.jotform-embed--aside { margin-block: 20px 0; }

@media (max-width: 767px) {
  .aside-contact { padding: 20px; }
}

/* ------------------------------------------------------------------ */
/* "Featured In" press strip inside POST CONTENT (meet-the-doctor) —   */
/* GrowthMed's .internal-accolade-slider, a small slick marquee on     */
/* live: 10 slides x 80px, ~64px row (measured on live at 1024,        */
/* 15 Sep 2026). Ours rendered the raw imgs at intrinsic size, five of */
/* them 404 (old-theme paths — rewritten in functions.php). Static     */
/* wrapped row without JS; rotators.js clones the row and adds the     */
/* marquee classes. Live uppercases the heading above it.              */
.accolade-viewport { overflow: hidden; }

.internal-accolade-slider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-block: 20px;
}

.internal-accolade-slider .slide-item {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.internal-accolade-slider .slide-item img {
  width: 80px;
  height: auto;
  display: block;
}

@keyframes meps-accolade-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.internal-accolade-slider.accolade-marquee {
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  animation: meps-accolade-marquee 27s linear infinite;
  will-change: transform;
}

h2:has(+ .accolade-viewport),
h3:has(+ .accolade-viewport),
h2:has(+ .internal-accolade-slider),
h3:has(+ .internal-accolade-slider) {
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Content buttons centre in their column — live's own .button.effect  */
/* inside post content is block-level flex, centred (measured x=172 in */
/* a 597px column on /about/dr-ruya-zhao/ at 1024, both pills). Ours   */
/* sat hard left: base.css's `a.button { display:inline-flex }` makes  */
/* auto margins resolve to 0 — the same trap as the homepage View-all  */
/* (Juan Carlos, 15 Sep 2026: "centered to the section").              */
.entry-content a.button {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}