/* Contact legal navigation (#54).
   Keep Imprint / Privacy immediately discoverable without promoting them into
   the global header navigation. Desktop anchors the pair to the compact
   header/logo outer page frame at the foot of the initial Contact viewport;
   the one-column composition moves the same pair below the beam on the right.
   Contact-owned alignment mirrors the rendered mobile header text axes:
   Imprint ends with Menu, while Privacy starts with Contact. The links
   deliberately mirror the inactive navigation typography/spacing while
   remaining Contact-owned navigation. */

body[data-page="contact"] .page-index{
  left:max(24px,2.6vw);
  gap:2rem;
  color:color-mix(in srgb,var(--ink) 72%,var(--bg));
  font-family:"CHARUS Inter",Arial,Helvetica,sans-serif;
  font-size:.88rem;
  font-weight:400;
  letter-spacing:0;
}

/* Contact already identifies the current viewport, so the page-index only
   exposes the two destinations that need persistent discovery. */
body[data-page="contact"] .page-index [data-page-index="contact"],
body[data-page="contact"] .page-index [data-page-index="contact"] + span,
body[data-page="contact"] .page-index [data-page-index="imprint"] + span{
  display:none;
}

body[data-page="contact"] .page-index a{
  display:inline-block;
  color:inherit;
  -webkit-text-stroke:0;
  paint-order:normal;
  transition:color .22s ease,transform .22s ease;
}
body[data-page="contact"] .page-index a:is(:hover,:focus-visible){
  color:var(--accent);
  transform:translateY(-1px);
}
body[data-page="contact"] .page-index a:active{
  transform:translateY(0);
}

/* With the terminal navigation affordance removed, the Contact page-end carries
   ownership only. Keep it quiet on the right; desktop mirrors the legal-entry
   navigation's left outer frame exactly. */
body[data-page="contact"] .page-end{
  justify-content:flex-end;
}

@media(min-width:921px){
  body[data-page="contact"] .page-index{
    /* The Contact controls may make the Hero intrinsically taller than 100svh.
       Anchor this secondary navigation to the first viewport rather than the
       eventual Hero bottom so the only legal-entry links remain immediately
       discoverable at every two-column viewport. */
    top:calc(100svh - clamp(24px,3.2vh,38px));
    bottom:auto;
    transform:translateY(-100%);
  }

  /* This pair belongs to the opening viewport, not to the later section
     boundary. The Contact-local runtime releases it as that viewport leaves.
     A keyboard focus already inside keeps the pair visible until focus moves;
     activating either jump link releases that focus so navigation can exit. */
  body[data-page="contact"] .page-index.is-split-scroll-exit{
    opacity:var(--contact-legal-scroll-opacity,1);
  }
  body[data-page="contact"] .page-index.is-split-scroll-exit:focus-within{
    opacity:1;
  }
  body[data-page="contact"] .page-index.is-scroll-hidden{
    pointer-events:none;
  }
  body[data-page="contact"] .page-index.is-scroll-hidden:focus-within{
    pointer-events:auto;
  }

  body[data-page="contact"] .page-end{
    padding-right:max(24px,2.6vw);
  }
}

@media(max-width:920px){
  body[data-page="contact"]{
    /* Contact's secondary navigation mirrors the compact header vertically.
       The geometric mirror uses the opposite .45rem correction, then the
       approved +1px optical compensation gives Imprint / Privacy the slightly
       calmer lower resting position from the reviewed variant. The compact
       logo block already scales with the beam geometry. Keep the shared compact
       shield's solid -> 94% -> 58% -> transparent fade so upward-scrolling
       links still disappear without a hard guard edge. */
    --contact-legal-optical-offset:1px;
    --contact-legal-mobile-top:calc(var(--compact-header-top) + var(--compact-logo-block) - .45rem + var(--contact-legal-optical-offset));
    --contact-legal-guard-end:calc(var(--contact-legal-mobile-top) - .08rem);
    --contact-legal-guard-soft:calc(var(--contact-legal-guard-end) - 10px);
    --contact-legal-guard-dense:calc(var(--contact-legal-guard-soft) - 10px);
    --contact-legal-guard-solid:calc(var(--contact-legal-guard-dense) - 8px);
  }

  body[data-page="contact"]::before{
    content:"";
    position:fixed;
    z-index:37;
    inset:0 0 auto 0;
    height:var(--contact-legal-guard-end);
    background:linear-gradient(
      to bottom,
      var(--bg) 0,
      var(--bg) var(--contact-legal-guard-solid),
      color-mix(in srgb,var(--bg) 94%,transparent) var(--contact-legal-guard-dense),
      color-mix(in srgb,var(--bg) 58%,transparent) var(--contact-legal-guard-soft),
      transparent var(--contact-legal-guard-end)
    );
    pointer-events:none;
  }

  body[data-page="contact"] .page-index{
    /* Keep the established compact-header rhythm below the beam. The fallback
       flex layout remains valid until the Contact-local geometry adapter has
       measured the rendered Menu / Contact text axes. */
    top:var(--contact-legal-mobile-top);
    right:calc(
      max(clamp(10px,2vw,18px),calc(env(safe-area-inset-right) + 8px))
      + 1.90rem
      + clamp(.36rem,1.5vw,.58rem)
    );
    bottom:auto;
    left:auto;
    z-index:36;
    justify-content:flex-end;
    gap:clamp(.36rem,1.5vw,.58rem);
    color:color-mix(in srgb,var(--ink) 72%,var(--bg));
    font-size:clamp(.64rem,2.55vw,.72rem);
    font-weight:400;
    letter-spacing:.01em;
    line-height:1;
    text-align:right;
  }

  body[data-page="contact"] .page-index [data-page-index="imprint"]{
    padding-inline:.34rem;
  }
  body[data-page="contact"] .page-index [data-page-index="privacy"]{
    padding-inline:.34rem;
  }

  /* Once measured, use the Contact Hero itself as the positioning frame.
     Only these Contact-owned legal links move; the shared header is untouched. */
  body[data-page="contact"] .page-index.is-axis-aligned{
    right:0;
    left:0;
    display:block;
    width:auto;
    height:1em;
  }
  body[data-page="contact"] .page-index.is-axis-aligned [data-page-index="imprint"],
  body[data-page="contact"] .page-index.is-axis-aligned [data-page-index="privacy"]{
    position:absolute;
    top:0;
  }
  body[data-page="contact"] .page-index.is-axis-aligned [data-page-index="imprint"]{
    right:var(--contact-legal-imprint-right);
    text-align:right;
  }
  body[data-page="contact"] .page-index.is-axis-aligned [data-page-index="privacy"]{
    left:var(--contact-legal-privacy-left);
    text-align:left;
  }
}

@media(max-width:600px) and (orientation:portrait){
  body[data-page="contact"] .page-index:not(.is-axis-aligned){
    right:calc(
      max(10px,calc(env(safe-area-inset-right) + 8px))
      + 1.76rem
      + clamp(.36rem,1.5vw,.58rem)
    );
  }
  body[data-page="contact"] .page-index [data-page-index="imprint"]{
    padding-right:.28rem;
  }
}