/*
    THE CONTACT PAGE'S OWN STYLESHEET.

    /contact and nothing else - the two halves of its head band, the pair of columns under it, and
    the list of onward routes in the rail. Linked by Components/Pages/Static/Contact.razor, so no
    other route fetches it.

    WHAT IT DOES NOT OWN. The band itself is `.sv-page-hero` and belongs to public-site.css with the
    other three; the form is `.sv-form`, `.sv-form-grid` and FormField; the pairs are `.sv-facts` in
    the band and `.sv-pairs` in the rail; the rail's own step is `.sv-stack-5`. What is stated here
    is where those sit, and nothing about what any of them looks like.

    THE FORM COMES FIRST AND THE RAIL FOLLOWS IT, which is the order a phone reads them and the
    order the two audiences arrive in: somebody who came to write does so, and somebody who came for
    an address already has it in the band above without scrolling at all.
*/

/* ── The head band, in two halves ─────────────────────────────────────────────
   WHAT THE PAGE IS ON THE LEFT AND HOW TO SKIP IT ON THE RIGHT. The band is the
   one place on the page where the direct addresses are stated; putting them here
   rather than under the form is what stops the page asking somebody who already
   knows what they want to read past a form to find a mailbox.
   ------------------------------------------------------------------------ */
.sv-contact__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sv-space-7);
  align-items: center;
}

/* A RULE RATHER THAN A BOX. The band is already the darkest surface on the page, and a bordered
   panel inside it would be a surface inside a surface - the same shape `.sv-notice` is refused
   inside a toolbar for. The column is a flex column so the line introducing the addresses and the
   addresses themselves state their step once, here, rather than on each other. */
.sv-contact__direct {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-4);
  border-left: 1px solid var(--sv-border-strong);
  padding-left: var(--sv-space-5);
}

/* Under the width the two halves need, the band stacks - and the rule turns with it. A left rule
   down a block that now runs the full width points at nothing beside it, so it becomes the step
   above the block instead. */
@media (max-width: 900px) {
  .sv-contact__head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sv-space-5);
  }

  .sv-contact__direct {
    border-left: 0;
    border-top: 1px solid var(--sv-border-strong);
    padding-left: 0;
    padding-top: var(--sv-space-5);
  }
}

/* ── The form and the rail ───────────────────────────────────────────────────
   The form takes the larger share because it holds a textarea somebody types a
   paragraph into; the rail holds two panels of short lines and does not need it.
   ------------------------------------------------------------------------ */
.sv-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sv-space-5);
  align-items: start;
}

@media (max-width: 900px) {
  .sv-contact__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── What answers faster than a message does ─────────────────────────────────
   THREE DESTINATIONS AS ONE LIST, RULED APART. Cards inside a rail panel would
   be the surface-inside-a-surface the band avoids for the same reason, and a bare
   run of links is three amber words with no way to tell which one answers the
   question the visitor actually has.
   ------------------------------------------------------------------------ */
.sv-contact__routes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sv-contact__routes > li + li {
  border-top: 1px solid var(--sv-border-subtle);
}

.sv-contact__route {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sv-space-3) 0;
  text-decoration: none;
}

/* The first and last rows sit flush against the panel's own padding, so the list is ruled by its
   dividers rather than standing off its container by a row's worth of air at each end. */
.sv-contact__routes > li:first-child > .sv-contact__route { padding-top: 0; }
.sv-contact__routes > li:last-child > .sv-contact__route { padding-bottom: 0; }

.sv-contact__route-name {
  font: 500 13px/1.4 var(--sv-font-sans);
}

/* THE NAME UNDERLINES, NOT THE WHOLE BLOCK, and only the underline needs saying. An underline is
   drawn THROUGH an anchor's descendants whatever colour they carry, so `a:hover` scores out the
   explanatory sentence as well and the two lines read as two links; it is turned off on the anchor
   and put back on the name alone. The sentence's colour needs no such rule, because
   `.sv-text-secondary` sits on the sentence itself and `a:hover` sits on the anchor - two elements,
   so the two declarations never compete and the sentence stays secondary while the name lights. */
.sv-contact__route:hover {
  text-decoration: none;
}

.sv-contact__route:hover > .sv-contact__route-name {
  text-decoration: underline;
}