/* ==========================================================================
   theme.css -- rules that belong to THIS WordPress build, not to the port.

   assets/css/global.css is GENERATED by bin/port-css.py, which rewrites the
   whole file from the reference build. Anything hand-written in there is one
   re-port away from being silently deleted, so theme-specific rules live here
   instead. Enqueued after global.css, so it wins ties without !important.
   ========================================================================== */

/* Pastel #182 -- Dr. Sytek's portrait on /referral-partners.
 *
 * The photo is 1600x2332 (portrait) rendered in a 1:1 .split-section__photo.
 * object-fit: cover with the default 50% 50% shows the middle 68.6% of the
 * frame, i.e. it cuts 366px off the top of a 2332px image -- and the top of her
 * head starts at 6.9% of the height, so the crop takes it off.
 *
 * 12% pulls the window up to start at 3.8%, clearing her head with a little
 * room above it. Scoped to this page: --square is used by 19 photos across 16
 * pages, most of them wide room shots where centre is correct.
 */
.page-referral-partners .split-section__photo--square img {
  object-position: 50% 12%;
}

/* Pastel #164 -- Dr. Sytek's portrait in the .wws-card grid.
 *
 * 1098x1600 (portrait) in a 382x287 landscape frame. cover at 50% 50% shows the
 * middle 51.6% of the frame, i.e. 24.2%..75.8% -- which starts BELOW her eyes
 * (21%) and ends at her lap. Her head is not in the picture at all.
 *
 * 10% starts the window at 4.8%, clearing the top of her head (8%).
 *
 * Keyed to the file rather than a page or an nth-child because the same photo
 * sits in the same component on /new-patients (card 3) and /technology (card 1)
 * with the identical defect, and because a rule that follows the image survives
 * the cards being reordered. If the photo is swapped in wp-admin the rule stops
 * applying, which is the safe direction to fail in.
 */
.wws-card__photo img[src*="dr-lauren-portrait-white-sweater"] {
  object-position: 50% 10%;
}

/* Pastel #177 -- the costs disclaimer under the price cards.
 *
 * The reference centres this one paragraph with an INLINE style:
 *   style="text-align: center; margin: 32px auto 0; max-width: 60ch;"
 * The port drops inline styles, so it came across left-aligned and John read it
 * as the box having changed style. It had.
 *
 * Scoped rather than applied to _section-trailer.php's .lead, because that
 * partial renders the trailing lead for 27 sections and this is the ONLY one
 * the reference centres (checked all 28 reference pages: 1 centred, 26 not).
 * Keyed to the .cost-grid it follows, which is what makes it this paragraph.
 */
.page-costs-and-financing .cost-grid + .lead.reveal {
  text-align: center;
  margin: 32px auto 0;
  max-width: 60ch;
}

/* Pastel #178 -- the button row under the treatments card grid.
 *
 * Another inline style the port dropped: the reference carries
 * style="margin-top: 48px;" on this row on BOTH pages that have it
 * (/who-we-serve/adults and /who-we-serve/teens). Without it the buttons sit
 * flush against the cards, gap measured at 0px against the reference's 48px.
 *
 * 48px is the design system's value for this position -- .treatments__footer,
 * which is the same row in a different wrapper, already hard-codes it.
 */
.treatments-grid + .btn-row {
  margin-top: 48px;
}

/* Pastel #181 -- the note under the referral trust cards.
 *
 * The cards themselves are byte-identical to the reference (32px padding, 24px
 * radius, same shadow, 16px gap, same three columns). The only difference is
 * the note below them: the reference carries style="margin-top: 32px;" and the
 * port dropped it, so it sits flush against the grid.
 *
 * This is the same dropped-inline-style defect as #177 and #178. It affects
 * .flag notes on about a dozen pages with values between 24px and 40px; only
 * this one was raised, so only this one is changed. See the run report.
 */
.page-referral-partners .trust-grid + .flag {
  margin-top: 32px;
}

/* Pastel #68 -- the one-line bio under a team member's role.
 *
 * New to this build: the reference's team cards carry a name and a role only,
 * so there is no ported rule for this and nothing to match. The client sent a
 * line of personality for each of the six ("Loudest laugh, biggest heart"), and
 * her original comment asked for "photos, titles and short bio".
 *
 * Deliberately quieter than .team-card__role, which is the job title and should
 * stay the more prominent of the two.
 */
.team-card__bio {
  font-size: 14px;
  line-height: 1.45;
  color: var(--sytek-ink-soft);
  opacity: 0.85;
  margin: 6px 0 0;
}

/* ==========================================================================
   The rest of the spacing the port dropped (Pastel #177/#178/#181 were three
   of these). The reference carries it in inline style attributes; port-css.py
   does not keep them. Values below are the reference's own, per page, not a
   single guessed default.

   .flag.reveal is the note _section-trailer.php renders at the end of a
   section. The .reveal is what distinguishes it from the .flag inside a cost
   card, which the reference does not give a margin to.
   ========================================================================== */

/* The reference's most common value: 14 of the 22 trailing notes. */
.flag.reveal { margin: 24px auto 0; }

/* Pages the reference gives 32px instead. */
.page-first-visit .flag.reveal,
.page-teens .flag.reveal,
.page-adults .flag.reveal { margin: 32px auto 0; }

/* The FAQ note sits under a long accordion and the reference gives it more. */
.page-faq .flag.reveal { margin: 40px auto 0; }

/* Thank-you centres its text as well as its box. */
.page-thank-you .flag.reveal { margin: 32px auto 0; text-align: center; }

/* about and referral-partners are NOT centred in the reference: margin-top
   only, so the note stays left-aligned under the body copy. */
.page-about .flag.reveal,
.page-referral-partners .flag.reveal { margin: 32px 0 0; }

/* Costs has two trailing leads. The centred one under the price cards is
   handled above; this is the other, which the reference leaves left-aligned. */
.page-costs-and-financing .lead.reveal { margin: 32px 0 0; max-width: 68ch; }
.page-costs-and-financing .trust-grid--cards { margin-top: 32px; }

/* Pastel #186 -- team member roles in brand green.
 *
 * .team-card__role is the job title under the name. It inherited --sytek-ink-soft
 * from the ported rule, which left it competing with .team-card__bio directly
 * beneath it. Green separates the title from the personality line and matches how
 * the eyebrow reads elsewhere on the page.
 *
 * .team-card__bio deliberately stays soft ink, so the two do not both shout.
 */
.team-card__role {
  color: var(--sytek-green);
  font-weight: 500;
}

/* Pastel #183 -- separate the bullet lists from the body copy above them.
 *
 * The reference gets this gap for free: there, the list follows p.lead, whose
 * 32px bottom margin does the work. On this build the list follows a body
 * paragraph instead, and bare paragraphs in a body without .prose have no
 * bottom margin, so the list sat flush against the text.
 *
 * (Removing the empty dl.visit-info that used to sit between them was the other
 * half of this and is fixed in media_prose.php. It was swallowing the space.)
 *
 * 24px rather than the reference's 32: John asked for ~25, it is a value already
 * in the system, and it matches the list's own 24px bottom margin so the block
 * sits evenly between what comes before and after.
 *
 * :not(:first-child) so a list that opens a body does not gain a stray gap.
 */
.split-section__body .creds-list:not(:first-child) {
  margin-top: 24px;
}