/* ==========================================================================
   Project pages (2026), DW-83: port rules
   ==========================================================================
   The design's case pages (website 8439249, site/realisations/<slug>.html)
   as rendered by the module: their own stylesheets (cases/manifest.php),
   layout/layout.css for the shared header and footer, then these rules.
   Every rule here says which difference from the design it closes.

   The template puts .home-editorial on <body> because the shared header and
   footer need it (layout/layout.css); the design's case pages carry no body
   class. The design's own .home-editorial rules that this brings onto the
   page are undone below, where they change what shows. The others change
   nothing on these pages: --closing-pin-top only places the footer reveal,
   which the design turned off on 21 Oct (closing-reveal.js), and the
   homepage's heading and hero rules match nothing here.
   ========================================================================== */

/* main as on the design's case pages: in the flow, with its own canvas
   (pages/case-detail.css). The homepage's footer reveal raises main above
   the footer (.home-editorial main in sections/footer-closing.css), which
   made main a stacking context here and painted the 1px row where the case
   ends and the contact section begins (at a fractional offset) lighter than
   the design's. */
html .home-editorial main.case-detail {
  position: static;
  z-index: auto;
  background-color: var(--background);
}

/* The contact form as the design's case pages show it: the form component's
   own look, a white block with a hairline and outlined fields
   (components/contact-form.css, components/form.css and the industrial
   variant's field line, variants/industrial.css). The homepage's grey form
   (the .home-editorial .closing-contact rules in sections/closing-contact.css
   and components/contact-form.css: a steel block, white fields without
   outlines) never reaches the design's case pages. These rules put the
   component's values back, with its states as the design's cascade gives
   them: no hover change, the ring on focus with the field's line kept (the
   variant's line outranks the component's focus colour), an invalid field in
   red. The white confirmation keeps its own, more specific rule. */
html .home-editorial .case-detail .closing-contact .contact-form {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
}
html .home-editorial .case-detail .closing-contact .contact-form :is(.input, .select, .textarea-group) {
  border-color: var(--ind-line-strong);
  box-shadow: var(--shadow-xs);
}
html .home-editorial .case-detail .closing-contact .contact-form :is(.input, .select):focus-visible,
html .home-editorial .case-detail .closing-contact .contact-form .textarea-group:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 30%, transparent);
}
html .home-editorial .case-detail .closing-contact .contact-form .input[aria-invalid="true"] { border-color: #c42b1c; }
html .home-editorial .case-detail .closing-contact .contact-form .textarea-group__foot { border-top-color: var(--border-subtle); }
html .home-editorial .case-detail .closing-contact .phone-code { border-color: var(--border, #d8dce1); }

/* A client logo that links its project page (28 Oct 2026, asked by the
   user; the design links none of its client logos, du2026_client_logo_url()).
   The link takes the logo's place without moving it: a flex box, it is the
   row's item where the list is a flex row and a block where the logo was
   one (the hero's marquee), with no line box around the logo; it can shrink
   as the logo could. */
.du2026-logo-link { display: flex; align-items: center; min-width: 0; max-width: 100%; }