/*
 * Shared presentation for the French (/wordpress/) and English (/wordpress/en/)
 * WordPress repair pages. Tokens, masthead, section heads, footer and the dark
 * theme come from studio.css; this sheet adds only what a service page needs
 * that the shared sheet lacks: the language switch, the call-to-action, the
 * list of fixes, the proof figures and the numbered steps. Every rule is scoped
 * to .wp-repair so nothing leaks onto another page.
 */
.wp-repair .head { padding: 48px 0 44px; }
.wp-repair .head h1 { max-width: 28ch; }
.wp-repair .head .standfirst { max-width: 62ch; }
.wp-repair .standfirst, .wp-repair .prose { font-size: 14.5px; line-height: 1.85; }
.wp-repair .band { padding: 38px 0; }
.wp-repair .shead { font-size: 14px; margin-bottom: 20px; }
.wp-repair .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.wp-repair .prose p + p { margin-top: 14px; }

/* Skip link: visible only while it has keyboard focus. */
.wp-skip { position: absolute; left: 18px; top: 8px; z-index: 110; padding: 10px; background: var(--bg); transform: translateY(-200%); }
.wp-skip:focus { transform: translateY(0); }

/* Language switch: the current language is plain text, the other is a link. */
.wp-languages { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; font-size: 13px; }
.wp-languages a { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 4px; }
.wp-languages a:hover { color: var(--accent); }
.wp-languages [aria-current] { color: var(--accent); }

.wp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 28px; }
.wp-cta { display: inline-block; background: var(--accent); color: var(--bg); border: 1px solid var(--accent); padding: 11px 20px; font-size: 14px; font-weight: 700; }
.wp-cta:hover { opacity: 0.86; }
.wp-actions span { color: var(--fg-dim); font-size: 12.5px; }

/* What gets fixed: one hairline row per problem, name left, description right. */
.wp-fixes { border-bottom: 1px solid var(--line); }
.wp-fixes > div { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 8px 32px; padding: 18px 0; border-top: 1px solid var(--line); }
.wp-fixes dt { color: var(--fg); font-weight: 700; font-size: 14px; }
.wp-fixes dd { color: var(--fg-dim); font-size: 14px; line-height: 1.8; }
.wp-fixes-note { margin-top: 24px; }

/* Proof figures. The number is shown above its label, but the label comes
   first in the source so a screen reader hears "active installations, 10,000+". */
.wp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); margin-bottom: 22px; }
.wp-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 16px 18px; border-left: 1px solid var(--line); }
.wp-stats > div:first-child { border-left: none; }
.wp-stats dt { color: var(--fg-dim); font-size: 12.5px; }
.wp-stats dd { color: var(--accent); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; white-space: nowrap; }

/* How it works: numbered rows in the same voice as the home page link rows. */
.wp-steps { list-style: none; counter-reset: wp-step; max-width: 74ch; }
.wp-steps li { counter-increment: wp-step; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 10px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--fg-dim); font-size: 14px; line-height: 1.8; }
.wp-steps li:first-child { border-top: 1px solid var(--line); }
.wp-steps li::before { content: counter(wp-step, decimal-leading-zero); color: var(--fg-dim); }
.wp-steps-note { margin-top: 22px; }

@media (max-width: 780px) {
    .wp-repair .head { padding-top: 32px; }
    .wp-repair .head h1 { font-size: 26px; }
    .wp-languages { margin-bottom: 26px; }
    .wp-fixes > div { grid-template-columns: 1fr; gap: 4px; }
    .wp-stats { grid-template-columns: 1fr; }
    .wp-stats > div { border-left: none; border-top: 1px solid var(--line); }
    .wp-stats > div:first-child { border-top: none; }
}