/*
 * Detail layout for condition and treatment pages (theme 0.4.0; inc/detail.php).
 * Built to Josh's two approved mockups of 2026-10-28: a compact green hero, an
 * "On this page" bar, white reading sections with fine dividers, soft-white bands,
 * open layouts with few cards, and one compact booking band. Colors are the
 * theme's own tokens (site.css :root); nothing new.
 *
 * Sections are block groups in the page content, edge to edge, each padded to
 * the site's 1240 px grid so a band's background can run the full width.
 *   lp-d-pair    two columns divided by a fine line (each column an lp-d-col)
 *   lp-d-split   heading column and body column (lp-d-head, lp-d-body)
 *   lp-d-steps   heading, then numbered steps in columns (lp-d-step)
 *   lp-d-band    soft-white background on any section
 *   lp-d-urgent  the urgent care note
 *   lp-d-refs    clinical references
 * In the content: lp-d-kicker (small label over a heading), lp-d-rows (linked
 * rows with a short line each), lp-d-links (inline links with arrows), lp-d-more
 * (one text link with an arrow), lp-d-note (a quieter line).
 */

.lp-detail {
  --d-pad: max(var(--lp-gutter), calc((100% - var(--lp-wrap)) / 2 + var(--lp-gutter)));
  --d-gap: clamp(28px, 4.4vw, 64px);
  --d-space: clamp(44px, 5.2vw, 72px);
  color: var(--lp-ink-2);
  font-size: 17px;
  line-height: 1.65;
}
html:has(body.lp-detail-page) { scroll-padding-top: calc(var(--lp-sticky-top) + 76px); }

/* Every section runs edge to edge; its content sits on the site grid. */
.lp-detail > :where(section, div, nav) { padding-inline: var(--d-pad); }
.lp-detail :where(p, ul, ol, h2, h3, figure) { margin: 0; }
.lp-detail :where(.wp-block-group) > * + * { margin-block-start: 16px; }
.lp-detail > section { padding-block: var(--d-space); }
.lp-detail > section + section:not(.lp-d-band) { border-top: 1px solid var(--lp-line); }
.lp-detail > section.lp-d-band + section { border-top: 0; }
.lp-d-band { background: var(--lp-mist); }

.lp-detail h2 { color: var(--lp-spruce); font-size: clamp(27px, 2.5vw, 34px); line-height: 1.15; }
.lp-detail h3 { color: var(--lp-spruce); font-size: 19px; letter-spacing: -.015em; line-height: 1.3; }
.lp-detail .lp-d-kicker + h2 { margin-top: 10px; }
.lp-detail h2 + :is(p, ul, ol) { margin-top: 14px; }
.lp-d-kicker { color: var(--lp-muted); font-size: 12.5px; font-weight: 650; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.lp-detail .lp-d-note { color: var(--lp-muted); font-size: 15px; line-height: 1.55; }
.lp-detail strong { color: var(--lp-ink); font-weight: 650; }

/* Links in running text keep their underline (WCAG 1.4.1); Blocksy removes it outside its own content area. */
.lp .lp-detail :where(p, li) a { text-decoration-line: underline; }

/* Plain lists: a short green rule instead of a bullet. */
.lp-detail ul:not([class*="lp-d-"]) { display: grid; gap: 8px; padding: 0; list-style: none; }
.lp-detail ul:not([class*="lp-d-"]) > li { position: relative; padding-left: 30px; }
.lp-detail ul:not([class*="lp-d-"]) > li::before { content: ""; position: absolute; top: .8em; left: 0; width: 15px; height: 2px; background: var(--lp-teal-deep); }
.lp-detail ol:not([class*="lp-d-"]) { display: grid; gap: 8px; padding-left: 22px; }
/* A long list of short items in two columns on wide screens (the hub's other conditions). */
@media (min-width: 701px) { .lp-detail ul.lp-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }

/* ---------- Hero ---------- */
.lp-intro-detail { padding-block: clamp(18px, 2.4vw, 26px) clamp(34px, 4vw, 52px); overflow: hidden; }
.lp-d-hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; }
.lp-d-hero-text { max-width: 760px; }
.lp-intro-detail .lp-breadcrumb { margin-bottom: clamp(22px, 2.6vw, 32px); }
.lp-intro-detail .lp-eyebrow::before { content: none; }
.lp-intro-detail .lp-eyebrow { margin-bottom: 12px; color: #fff; font-size: 12px; letter-spacing: .16em; }
.lp .lp-intro-detail .lp-intro-title { font-size: clamp(36px, 4.2vw, 54px); line-height: 1.06; }
.lp-intro-detail .lp-lead { margin-top: 16px; max-width: 54ch; font-size: clamp(17.5px, 1.4vw, 19.5px); line-height: 1.55; }
.lp-intro-detail .lp-actions { margin-top: 26px; }
.lp-d-first { margin: 14px 0 0; color: #dde8e4; font-size: 15px; }
.lp-d-reviewed { margin: 14px 0 0; color: #c2d5ce; font-size: 14px; line-height: 1.5; }
.lp-d-reviewed time { white-space: nowrap; }
.lp .lp-d-reviewed a { color: #fff; text-decoration-color: rgba(209, 230, 225, .5); }
.lp .lp-d-reviewed a:hover { text-decoration-color: currentColor; }
.lp-d-art { margin: 0; }
.lp-d-art picture { display: contents; }
.lp-d-art img { display: block; width: 100%; height: auto; }
@media (min-width: 901px) {
  .lp-intro-has-art { padding-bottom: 0; }
  .lp-intro-has-art .lp-d-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 40%); column-gap: clamp(24px, 4vw, 56px); }
  .lp-intro-has-art .lp-d-hero-text { padding-bottom: clamp(34px, 4vw, 52px); }
  .lp-intro-has-art .lp-d-art { align-self: stretch; display: flex; align-items: flex-end; justify-content: center; }
  .lp-intro-has-art .lp-d-art img { max-height: 480px; width: auto; max-width: 100%; }
}
@media (max-width: 900px) { .lp-d-art { display: none; } }
/* Text-only hero on wide screens: the title with Book, Call and the review under it on the left, the lead on the
   right from the title's first line, so the band fills the width without an empty column and stays compact.
   Reading order is unchanged (title, lead, buttons). */
@media (min-width: 1100px) {
  .lp-intro-detail:not(.lp-intro-has-art) .lp-d-hero-text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; max-width: none; }
  .lp-intro-detail:not(.lp-intro-has-art) .lp-breadcrumb { grid-column: 1 / -1; }
  .lp-intro-detail:not(.lp-intro-has-art) .lp-d-hero-head { grid-column: 1; grid-row: 2; }
  .lp-intro-detail:not(.lp-intro-has-art) .lp-d-hero-body { display: contents; }
  .lp-intro-detail:not(.lp-intro-has-art) .lp-lead { grid-column: 2; grid-row: 2 / span 3; margin-top: 0; padding-top: 34px; max-width: 46ch; font-size: 18px; line-height: 1.6; }
  .lp-intro-detail:not(.lp-intro-has-art) .lp-actions { grid-column: 1; grid-row: 3; margin-top: 28px; }
  .lp-intro-detail:not(.lp-intro-has-art) :is(.lp-d-first, .lp-d-reviewed) { grid-column: 1; }
  .lp-intro-detail:not(.lp-intro-has-art) .lp-d-first { grid-row: 4; }
  .lp-intro-detail:not(.lp-intro-has-art) .lp-d-reviewed { grid-row: 5; }
  .lp .lp-intro-detail:not(.lp-intro-has-art) .lp-intro-title { font-size: clamp(44px, 4.1vw, 56px); }
}
}

/* ---------- On this page ---------- */
.lp-detail > .lp-d-nav { position: sticky; top: var(--lp-sticky-top); z-index: 20; background: #fff; border-bottom: 1px solid var(--lp-line); }
/* Signed in, the header sits 32 px lower under the WordPress toolbar. */
@media (min-width: 783px) { .admin-bar .lp-detail > .lp-d-nav { top: calc(var(--lp-sticky-top) + 32px); } }
.lp-d-nav-in { display: flex; align-items: stretch; gap: clamp(16px, 3vw, 40px); }
.lp-d-nav-label { flex: none; align-self: center; color: var(--lp-muted); font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.lp-d-nav .lp-d-nav-list { display: flex; gap: clamp(4px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.lp-d-nav .lp-d-nav-list::-webkit-scrollbar { display: none; }
.lp-d-nav li { flex: none; }
.lp .lp-d-nav a { position: relative; display: flex; align-items: center; min-height: 56px; padding: 0 8px; color: var(--lp-ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.lp .lp-d-nav a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: transparent; transition: background-color .15s; }
.lp .lp-d-nav a:hover { color: var(--lp-teal-deep); }
.lp .lp-d-nav a[aria-current] { color: var(--lp-teal-deep); font-weight: 600; }
.lp .lp-d-nav a[aria-current]::after { background: var(--lp-teal-deep); }
.lp .lp-d-nav a:focus-visible { outline-offset: -3px; }

/* ---------- Two columns ---------- */
.lp-d-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--d-gap); }
.lp-detail .lp-d-pair > * + * { margin-block-start: 0; }
.lp-d-pair > .lp-d-col + .lp-d-col { padding-left: var(--d-gap); border-left: 1px solid var(--lp-line); }
.lp-d-pair > :not(.lp-d-col) { grid-column: 1 / -1; }
.lp-d-pair > .lp-d-urgent { margin-top: var(--d-gap); }

/* ---------- Heading and body ---------- */
.lp-d-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--d-gap); align-items: start; }
.lp-detail .lp-d-split > * + * { margin-block-start: 0; }
.lp-d-split > .lp-d-body { padding-left: var(--d-gap); border-left: 1px solid var(--lp-line); }
.lp-d-head > p:not(.lp-d-kicker) { color: var(--lp-muted); }

/* ---------- Steps ---------- */
.lp-d-steps { counter-reset: lp-step; }
.lp-d-steps > .lp-d-step-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: clamp(26px, 3vw, 36px); }
.lp-detail .lp-d-step-list > * + * { margin-block-start: 0; }
.lp-detail .lp-d-step { counter-increment: lp-step; margin: 0; padding-right: clamp(20px, 2.6vw, 36px); }
.lp-d-step + .lp-d-step { padding-left: clamp(20px, 2.6vw, 36px); border-left: 1px solid var(--lp-line-2); }
.lp-d-step::before { content: counter(lp-step, decimal-leading-zero); display: block; margin-bottom: 6px; color: var(--lp-teal-deep); font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.lp-detail .lp-d-step > h3 + * { margin-top: 8px; }
.lp-d-step p { font-size: 16px; line-height: 1.6; }
.lp-d-steps > .lp-d-after { margin-top: clamp(26px, 3vw, 34px); padding-top: 18px; border-top: 1px solid var(--lp-line-2); }

/* ---------- Urgent care ---------- */
.lp-d-urgent { position: relative; padding: 22px clamp(20px, 3vw, 32px) 22px calc(clamp(20px, 3vw, 32px) + 46px); background: var(--lp-mist); border-left: 3px solid var(--lp-spruce); }
.lp-detail > .lp-d-urgent-wrap { padding-bottom: var(--d-space); }
.lp-detail > section:has(+ .lp-d-urgent-wrap) { padding-bottom: 28px; }
.lp-d-urgent::before { content: ""; position: absolute; top: 22px; left: clamp(20px, 3vw, 32px); width: 30px; height: 30px; background: var(--lp-spruce); -webkit-mask: var(--d-warn) center / contain no-repeat; mask: var(--d-warn) center / contain no-repeat; --d-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.lp-detail .lp-d-urgent h2 { color: var(--lp-ink); font-size: 17.5px; letter-spacing: -.01em; line-height: 1.4; }
.lp-detail .lp-d-urgent h2 + p { margin-top: 4px; }
.lp-d-urgent p { color: var(--lp-ink-2); font-size: 16px; line-height: 1.6; }

/* ---------- Linked rows ---------- */
.lp-detail .lp-d-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--lp-line); }
.lp-d-rows > li { position: relative; padding: 16px 44px 16px 0; color: var(--lp-muted); font-size: 15.5px; line-height: 1.5; }
.lp-d-rows > li + li { border-top: 1px solid var(--lp-line); }
.lp-d-rows > li::after { content: ""; position: absolute; top: 50%; right: 4px; width: 20px; height: 20px; margin-top: -10px; background: var(--lp-spruce); -webkit-mask: var(--d-arrow) center / contain no-repeat; mask: var(--d-arrow) center / contain no-repeat; transition: transform .15s; }
.lp .lp-d-rows a { display: block; margin-bottom: 2px; color: var(--lp-ink); font-size: 17px; font-weight: 650; text-decoration: none; }
.lp .lp-d-rows a::after { content: ""; position: absolute; inset: 0; }
.lp .lp-d-rows a:focus-visible { outline: 0; }
.lp-d-rows > li:focus-within { outline: 3px solid var(--lp-teal); outline-offset: 2px; }
/* An option without a page of its own: its name as plain text, no arrow. */
.lp-d-rows > li:not(:has(a)) { padding-right: 0; }
.lp-d-rows > li:not(:has(a))::after { content: none; }
.lp-detail .lp-d-rows > li > strong:first-child { display: block; margin-bottom: 2px; color: var(--lp-ink); font-size: 17px; font-weight: 650; }
.lp-d-rows > li:hover a { color: var(--lp-teal-deep); }
.lp-d-rows > li:hover::after { transform: translateX(3px); }
.lp-d-rows + .lp-d-note { margin-top: 16px; }
.lp-detail { --d-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E"); --d-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); }

/* ---------- Text links with arrows ---------- */
.lp-detail .lp-d-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.lp-detail :not(.lp-d-refs) > .lp-d-links { margin-top: 18px; }
.lp .lp-detail :is(.lp-d-links, .lp-d-more, .lp-d-refs) a { color: var(--lp-teal-deep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(11, 111, 93, .38); text-underline-offset: 5px; }
.lp .lp-detail :is(.lp-d-links, .lp-d-more, .lp-d-refs) a:hover { color: var(--lp-spruce); text-decoration-color: currentColor; }
/* The arrow rides on the link's last word (span.lp-d-end, added by scripts/make-wp-import.py), which never wraps, so a wrapped link keeps its arrow
   beside the last word. A link without the span carries the arrow itself. */
.lp-d-end { white-space: nowrap; }
.lp-detail :is(.lp-d-more, .lp-d-links li) { text-wrap: pretty; }
.lp-detail :is(.lp-d-links, .lp-d-more) :is(a:not(:has(.lp-d-end)), .lp-d-end)::after { content: "\00a0" url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b6f5d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E"); vertical-align: -1px; }
.lp-detail .lp-d-links a[href^="http"]:not(:has(.lp-d-end))::after, .lp-detail .lp-d-links a[href^="http"] .lp-d-end::after { content: "\00a0" url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b6f5d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); }
.lp-detail .lp-d-more { margin-top: 22px; }

/* ---------- Questions ---------- */
.lp-detail .lp-faq > * + * { margin-block-start: 0; }
.lp-detail .lp-faq details { margin: 0; border-bottom: 1px solid var(--lp-line-2); }
.lp-detail .lp-faq details:first-child { border-top: 1px solid var(--lp-line-2); }
.lp-detail .lp-faq summary { position: relative; margin: 0; padding: 17px 44px 17px 0; color: var(--lp-ink); font-size: 17px; font-weight: 620; line-height: 1.4; list-style: none; cursor: pointer; }
.lp-detail .lp-faq summary::-webkit-details-marker { display: none; }
.lp-detail .lp-faq summary::before, .lp-detail .lp-faq summary::after { content: ""; position: absolute; top: 50%; right: 6px; width: 15px; height: 1.75px; background: var(--lp-spruce); transition: transform .2s; }
.lp-detail .lp-faq summary::after { transform: rotate(90deg); }
.lp-detail .lp-faq details[open] summary::after { transform: rotate(0deg); }
.lp-detail .lp-faq summary:hover { color: var(--lp-teal-deep); }
.lp-detail .lp-faq details > :not(summary) { margin: 0 0 18px; padding-right: 44px; color: var(--lp-muted); font-size: 16px; line-height: 1.6; }
.lp-detail .lp-faq details > :not(summary) + :not(summary) { margin-top: -6px; }

/* ---------- References and the closing lines ---------- */
.lp-d-refs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px; }
.lp-detail > .lp-d-refs { padding-block: 22px; border-top: 1px solid var(--lp-line); }
.lp-detail > .lp-d-refs + .lp-d-refs { border-top: 0; padding-top: 0; }
.lp-detail .lp-d-refs > * + * { margin-block-start: 0; }
.lp .lp-detail .lp-d-refs a { font-size: 15px; }
.lp-detail > .lp-d-disclaimer { max-width: none; margin: 0; padding: 18px var(--d-pad) clamp(28px, 3vw, 40px); border-top: 1px solid var(--lp-line); color: var(--lp-muted); font-size: 14px; line-height: 1.55; }

/* ---------- Compact booking band ---------- */
.lp-d-cta { padding-block: 0 clamp(40px, 5vw, 64px); }
.lp-d-cta-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; padding: clamp(24px, 3vw, 32px) clamp(24px, 3.4vw, 40px); background: var(--lp-deep); color: #dbe7e2; border-radius: 2px; }
.lp .lp-d-cta-card h2 { margin: 0; color: #fff; font-size: clamp(23px, 2.2vw, 28px); line-height: 1.2; }
.lp-d-cta-card p { margin: 6px 0 0; }
.lp-d-cta-card :focus-visible { outline-color: var(--lp-mint); }

/* ---------- Tablets and phones ---------- */
@media (max-width: 900px) {
  html:has(body.lp-detail-page) { scroll-padding-top: calc(var(--lp-sticky-top) + 20px); }
  /* The bar scrolls with the page here, so it never covers the text. */
  .lp-detail > .lp-d-nav { position: static; padding-inline: 0; }
  .lp-d-nav-in { gap: 0; }
  .lp-d-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lp-d-nav .lp-d-nav-list { padding-inline: calc(var(--lp-gutter) - 8px); scroll-padding-inline: var(--lp-gutter); }
  .lp .lp-d-nav a { min-height: 52px; font-size: 14.5px; }
  .lp-d-pair, .lp-d-split { grid-template-columns: minmax(0, 1fr); }
  .lp-d-pair > .lp-d-col + .lp-d-col, .lp-d-split > .lp-d-body { margin-top: 36px; padding-top: 32px; padding-left: 0; border-left: 0; border-top: 1px solid var(--lp-line); }
  .lp-d-split > .lp-d-body { margin-top: 24px; padding-top: 0; border-top: 0; }
  .lp-d-step + .lp-d-step { padding-left: 0; border-left: 0; }
  .lp-d-steps > .lp-d-step-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lp-d-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 0; }
  .lp-d-step::before { grid-row: 1 / span 9; margin: 0; }
  .lp-detail .lp-d-step > h3 + * { margin-top: 4px; }
  .lp-d-cta-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .lp-detail { font-size: 16.5px; }
  .lp-intro-detail { padding-block: 14px 30px; }
  .lp-intro-detail .lp-breadcrumb { margin-bottom: 18px; }
  .lp-intro-detail .lp-eyebrow { margin-bottom: 10px; font-size: 11.5px; }
  .lp .lp-intro-detail .lp-intro-title { font-size: clamp(31px, 8.6vw, 36px); line-height: 1.08; }
  .lp-intro-detail .lp-lead { margin-top: 12px; font-size: 16.5px; line-height: 1.55; }
  .lp-intro-detail .lp-actions { display: grid; gap: 10px; margin-top: 20px; }
  .lp .lp-intro-detail .lp-btn { min-height: 48px; padding-block: 11px; }
  .lp-d-first { margin-top: 12px; font-size: 14.5px; }
  .lp-d-reviewed { margin-top: 6px; font-size: 13.5px; }
  .lp-d-cta-card .lp-actions { display: grid; }
  .lp-d-urgent { padding-left: clamp(20px, 3vw, 32px); padding-top: 64px; }
  .lp-d-refs { display: grid; gap: 8px; }
}

@media print {
  .lp-d-nav, .lp-d-cta { display: none; }
  .lp-detail .lp-faq details > :not(summary) { display: block; }
}