/*
 * Block-editor compatibility layer + plugin additions.
 *
 * help-center.css is the v3.5 handoff stylesheet, kept byte-for-byte so Natalie can diff it
 * against her copy. Everything the plugin needs beyond it lives here: the wrappers that
 * storing articles as Gutenberg blocks introduces, inline-SVG icon sizing (the handoff uses
 * the Phosphor icon font, which the plugin does not ship), page-width variants the handoff
 * sets inline, and the admin-bar offsets.
 *
 * Reader pages ship without core's block CSS (see inc/assets.php), so anything core would
 * normally reset has to be reset here.
 */

/* ---------------------------------------------------------------------------
 * Block wrappers.
 * ------------------------------------------------------------------------- */

/*
 * Group blocks are structural only — the design never spaces them. :where() so the reset
 * carries zero specificity and only reaches groups help-center.css does not space itself.
 */
:where(.hc-body .wp-block-group) { margin: 0; }

/* The two gaps that carry the page, pinned so they do not depend on a cascade race with
   theme.json layout CSS or other plugins' wrappers. */
.hc-body .wp-block-group.hc-rulecard { margin: 0 0 36px; }
.hc-body section.wp-block-group { margin: 0 0 38px; }

/* The kicker is a paragraph now; `.hc-rulecard p` (0,1,1) would otherwise beat `.hc-kicker`. */
.hc-rulecard .hc-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin: 0 0 10px; }

/* core/table puts the class on the wrapping <figure>; the design styles the table. */
.hc-body figure.wp-block-table { margin: 0 0 14px; }
.hc-table > table { width: 100%; border-collapse: collapse; font-size: 16px; }

/* Related articles: grid children are <p> blocks wrapping each link. */
.hc-related p { margin: 0; }
.hc-related a { display: block; }

/* Scenario paragraphs keep the design's tighter rhythm, not the generic section p. */
.hc-body p.hc-scenario { margin: 0 0 14px; }

/*
 * Featured image. BEYOND THE HANDOFF — the approved design has no lead-image slot. Reuses
 * .hc-figure so the frame matches in-article figures; differs only in separation. Not
 * named .hc-hero: that is the handoff's dark home banner.
 */
.hc-body .hc-figure--lead { margin: 0 0 28px; }

/* core/image is a <figure>; without core's block CSS it would get `margin: 1em 40px`. */
.hc-body figure.wp-block-image { margin: 0 0 14px; }
.hc-body figure.wp-block-image img { display: block; max-width: 100%; height: auto; }
.hc-body figure.wp-block-image figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/*
 * A Related Articles entry whose target is not published yet keeps the tile but loses the
 * two affordances that promise a destination (see inc/render.php).
 */
.hc-related a:not([href]) { cursor: default; }
.hc-related a:not([href]):hover { border-color: var(--line); text-decoration: none; }

/* ---------------------------------------------------------------------------
 * Icons. The handoff sizes Phosphor glyphs by font-size; the inline SVGs do the same.
 * ------------------------------------------------------------------------- */
.hc-icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
/* .hc-support .ph had margin-right:4px in the handoff; flex parents (.hc-toggle, .hc-verified,
   .hc-feedback-btns button) space by gap and get no margin. */
.hc-support .hc-icon { margin-right: 4px; }
.hc-verified .hc-icon { font-size: 15px; }
.hc-crumb .hc-icon { font-size: 12px; }

/* v3.8: the breadcrumb's back arrow. Natalie writes `.hc-crumb a .ph-arrow-left`; the
   plugin ships inline SVG, so the same rule is restated against the class lshc_icon()
   emits. Same numbers, different selector. */
.hc-crumb a .hc-icon--arrow-left { margin-right: 4px; vertical-align: -2px; }

/* v3.8 breadcrumb, one line added after measuring it on a phone.
   Her CSS does NOT overflow — `overflow:hidden` on `.hc-crumb-current` gives that flex item
   an automatic minimum size of zero, so it shrinks and ellipsizes as designed. An earlier
   0.1.49 build added flex-wrap and min-width:0 on the opposite assumption; both were wrong
   and are gone.
   What does go wrong is subtler: with the row unable to wrap, the two links squeeze instead,
   and their own text wraps. At 390px the trail became three lines tall — "Help / Center" and
   "Photos / & job / records" stacked into narrow columns. Keeping the links on one line each
   sends the squeeze where she put the ellipsis, on the current article.
   Measured at 320/360/390/430/768px: one line at every width, never a sideways scroll.
   Worth her confirming: below about 360px the article title is down to a few pixels, so the
   trail effectively reads Help Center › topic. */
.hc-crumb a { white-space: nowrap; }
.hc-search .hc-icon { font-size: 20px; color: #6b7580; }

/* Theme toggle: both glyphs are in the button; show the one for the theme you can switch to. */
.hc-toggle-label { line-height: 1; }
.hc-toggle .hc-icon--sun { display: none; }
[data-theme="dark"] .hc-toggle .hc-icon--sun { display: inline-block; }
[data-theme="dark"] .hc-toggle .hc-icon--moon { display: none; }

/* ---------------------------------------------------------------------------
 * Page variants the handoff sets with inline styles.
 * ------------------------------------------------------------------------- */
.hc-page--narrow { max-width: 860px; }
.hc-page--tight { max-width: 760px; }
.hc-section { margin: 0 0 36px; }
.hc-hero .hc-top { margin-bottom: 0; }
.hc-home-section--first { margin-top: 8px; }
.hc-topic h1 { margin-bottom: 10px; }
.hc-search-page h1 { margin-bottom: 16px; }
.hc-search-page .hc-search { margin-bottom: 24px; }
.hc-404 h1 { margin-bottom: 12px; }
.hc-404-intro { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; }
.hc-empty p { margin: 0 0 16px; }
.hc-404-code { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.hc-contact-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hc-support--inline { display: inline-flex; align-items: center; margin: 0; }
.hc-empty .hc-contact-actions { justify-content: center; }
.hc-feedback .hc-feedback-followup--no .hc-support--inline { margin: 0; }
a.hc-pill--link:hover { background: var(--brand); color: var(--on-brand); text-decoration: none; }

/*
 * Handoff CSS defect: `.hc-rail a:hover` (0,2,1) outranks `.hc-support:hover` (0,2,0), so the
 * rail's Ask Pro Support button hovered to the grey nav background while `.hc-rail
 * a.hc-support` kept its text white — white on pale grey. Restate the button's own hover
 * and press states at higher specificity. The ghost button is already correct in the skin.
 */
.hc-rail a.hc-support:hover { background: var(--brand-hover); color: var(--on-brand); }
.hc-rail a.hc-support:active { background: var(--brand-press); color: var(--on-brand); }

/* Visually hidden, still read aloud. Normally the theme's job, but reader pages drop the
   theme layer entirely. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------------
 * "Get the Pro app" card on the contact page (inc/app-links.php). Official store badges at
 * 40px tall — Apple's minimum — one row per brand, both badges on every device. When the
 * script can tell the phone's platform it sets data-platform, and that store's badge leads.
 * ------------------------------------------------------------------------- */
.hc-apps { border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px 4px; margin: 0 0 24px; }
.hc-apps__title { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin: 0 0 4px; }
.hc-apps__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; }
.hc-apps__row + .hc-apps__row { border-top: 1px solid var(--line); }
.hc-apps__brand { flex: 1 1 140px; font-size: 16px; font-weight: 700; }
.hc-apps__stores { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hc-apps__badge { display: inline-flex; align-items: center; text-decoration: none; }
.hc-apps__badge img { display: block; height: 40px; width: auto; }
/* The reader's own store leads. Apple is first in the markup; on Android, move it after. */
.hc-apps[data-platform="android"] .hc-apps__badge--ios { order: 1; }

/* ---------------------------------------------------------------------------
 * Sticky offsets have to clear the admin bar (32px fixed above 782px).
 * ------------------------------------------------------------------------- */
body.admin-bar .hc-rail { top: 56px; }
@media (min-width: 783px) {
	body.admin-bar .hc-chipbar { top: 32px; }
}

/* Header logo chosen in Help Center → Settings (0.1.58). The handoff turns the wordmark white in dark
   mode; a multi-colour logo would become a white block, so it keeps its own colours in both themes. */
.hc-logo img.hc-logo-custom,
[data-theme="dark"] .hc-logo img.hc-logo-custom { filter:none; }