/* ============================================================
   CONTACT — the page's own bridge.

   Loaded after `pag-v6-elementor.css` and only on this page. Anything genuinely
   general belongs in the shared file; everything here is about markup only
   Contact has. See V6-BUILD-RULES.md for why a page gets its own file at all.
   ============================================================ */

/* ------------------------------------------------------------
   1. WHOLE-CARD LINKS, the two rows of them
   §5 of the shared bridge does this for `.opt` and `.close-card`. Both card
   rows here are the same construction — v6 makes each card a single <a>, an
   Elementor container cannot be one, so the card is a container and its own
   inner `.link` is stretched over it.

   The overlay resolves against the nearest POSITIONED ancestor, and every
   Elementor container is `position:relative` already. Here the link is a direct
   child of the card, so the card is that ancestor and this is enough. It would
   not be if the link were nested one level down — the overlay would size itself
   to whatever container held it, the card would be dead, and nothing in the
   harness would say so.
   ------------------------------------------------------------ */
body.pag-v6 .route,
body.pag-v6 .path{ position:relative; }
body.pag-v6 .route .link a::after,
body.pag-v6 .path .link a::after{
  content:''; position:absolute; inset:0; z-index:1;
}

/* ------------------------------------------------------------
   2. THE DETAILS CARD'S OWN CHILDREN
   `.detail > p{font-size:var(--t-small)}` and `.detail > *{position:relative}`
   are both CHILD selectors, and v6's card holds its heading, its paragraph and
   its list directly. Elementor puts two divs between the card and each of them,
   so neither rule matched: the paragraph rendered at body size, 14.25/23.51
   against v6's 13.25/22.53, and the card measured 2px tall.

   `position:relative` matters as much as the size. The card draws its azure
   corner with `.detail::before`, a full-bleed absolute layer, and `.detail > *`
   is what lifts the content above it. Landing on a wrapper it happened to work
   here — the wrapper contains the content — but it works by accident, and the
   first child that needs its own stacking would find out.

   TWO SEPARATE FIXES, and the first one alone does nothing for the second.

   `display:contents` takes the wrappers out of the BOX tree, which is what
   `.detail` needs: it is a flex column and its items should be the heading, the
   paragraph and the list, not three anonymous divs. `.dl` in particular takes
   `flex:1` to fill whatever height the form beside it turns out to be, and it
   can only do that as a flex item of the card.

   It does NOT change the DOM. Selectors run on the DOM, so `.detail > p` still
   misses through it — trap 3, and the reason this section is not four lines
   long. The two child selectors have to be restated against the markup that is
   actually there.

   Restated, not re-derived: every value is the same custom property v6 reads,
   so the only thing duplicated is the selector. `:where()` keeps the restated
   rules at v6's own weight rather than above it, so anything more specific in
   `pag-v6-contact.css` still wins — the responsive block at the foot of that
   file re-points `.detail > p` at 560px, and it must keep doing so.
   ------------------------------------------------------------ */
body.pag-v6 .detail > .elementor-widget,
body.pag-v6 .detail > .elementor-widget > .elementor-widget-container{ display:contents; }

:where(body.pag-v6 .detail > .elementor-widget-text-editor) p{
  font-size:var(--t-small); line-height:var(--lh-small); max-width:none;
  color:color-mix(in srgb, #fff 86%, var(--deep));
}
:where(body.pag-v6 .detail) > .elementor-widget{ position:relative; }

/* ------------------------------------------------------------
   2b. AND THE SAME FOR BOTH CARD ROWS, where it decides the LAYOUT
   `.route p:not(.tag){flex:1}` and `.path p{flex:1}` are what push the link to
   the foot of the card: the paragraph takes the leftover height, so two cards
   of unequal copy still line their links up. `flex` only means anything on a
   flex ITEM, and with Elementor's wrappers in place the item is the wrapper —
   so `flex:1` landed on a paragraph that was not one, the leftover went
   nowhere, and in the card whose copy is shorter the link sat 15.5px high.

   Worth saying how little of it showed. The cards are the same height on both
   sides, the section is the same height, the ladder is flat at every width and
   the text is identical — because the space is INSIDE a card sized by its
   taller neighbour. It is 0.17% of one section in the pixel diff, two bands of
   fifteen rows, and that is the whole of the evidence.

   `> .elementor-widget`, not `> .elementor-element`: the chip is a CONTAINER
   and carries the second class but not the first. `display:contents` on it
   would take the 56px square out of the box tree and leave the mark loose on
   the card.
   ------------------------------------------------------------ */
body.pag-v6 .route > .elementor-widget,
body.pag-v6 .route > .elementor-widget > .elementor-widget-container,
body.pag-v6 .path > .elementor-widget,
body.pag-v6 .path > .elementor-widget > .elementor-widget-container{ display:contents; }

/* §3 WAS HERE — THE CONSENT CHECKBOX — and it has moved to the shared bridge.
   `.consent` moved up into shared.css on 26 August so Register could use the
   form vocabulary rather than growing a second one, and what BRIDGES CF7's
   markup to that vocabulary belongs in the same place for the same reason.
   Register is the second page to need it and will not be the last.
   See "CF7'S CONSENT CHECKBOX" in pag-v6-elementor.css. */


/* ------------------------------------------------------------
   4. THE CARD LINK'S HOVER, on both card rows
   v6 writes `.link:hover, a:hover .link` in system.css, because on a card the
   whole card is one <a> and the pointer is rarely on the words. Our card is a
   container with a stretched inner link, so `a:hover` never fires: the card
   lifted, the chip went azure, and the link alone stayed Deep Blue.

   Exactly §26.2 for the homepage's option cards and §28 for the opening band.
   Four instances of one shape now, and the general fix is tempting — give the
   forwarded anchor `color:inherit` so it simply takes whatever v6 sets on the
   wrapper, and all four disappear. It is NOT done here: two of the four are on
   the published homepage, and a rule that reaches them belongs in the shared
   bridge with the homepage re-measured behind it, not in Contact's file.
   ------------------------------------------------------------ */
body.pag-v6 .route:hover a.link,
body.pag-v6 .path:hover a.link{ color:var(--azure); }
body.pag-v6 .route:hover a.link svg,
body.pag-v6 .path:hover a.link svg{ transform:translateX(3px); }

/* §5 WAS HERE — THE INLINE LINK'S UNDERLINE — and it has moved to the shared
   bridge. `.ilink` is not Contact's: the legal pages carry it in the details
   inside a clause and in the aside card, and it lost its underline there for
   the same reason. A rule that three pages need is not a page's own.
   See "THE INLINE LINK KEEPS ITS UNDERLINE" in pag-v6-elementor.css. */