/* ==============================================================================
   CONTACT BLOCK
   ============================================================================== */

/* The block places its title and intro copy above the form; the form's
   own fields follow below, in this same file since the old _modals.css
   (named after a modal the form no longer lives in) was folded in. On
   its own the block keeps a form-sized column; beside the studio's
   details (below) it takes the column the page gives it. */
.block-contact {
  width: 100%;
  max-width: 40rem;
}

/* After a text block (the studio's details on the contact page) it
   takes the same rule above it that separates one text block from the
   next, so on a phone, where the two stack, the form starts a new
   subject instead of running on from the address. */
.block-text + .block-contact {
  padding-block-start: var(--spacing-lg);
  border-block-start: 1px solid var(--border-light);
}

.block-contact h2 {
  margin-block-end: var(--spacing-sm);
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.1;
}

/* > (child), not a descendant selector: templates/blocks/contact.html's
   own intro <p> is a direct child of .block-contact, but .form-error and
   .form-alert (below) are <p> elements too, nested a few levels
   deeper inside the form. A descendant ".block-contact p" would match
   both, and its specificity (class + type) ties with ".form-error"/
   ".form-alert" (a single class) — so it silently painted every form
   message in --text-secondary regardless of import order, and
   --color-danger never actually reached the page (task 6 review,
   finding 1: caught only because a live render was checked, not the
   token value alone). */
.block-contact > p {
  max-width: var(--measure);
  margin: 0 0 var(--spacing-lg);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==============================================================================
   THE STUDIO'S DETAILS BESIDE THE FORM
   ============================================================================== */

/* The contact page is a text block with the studio's address,
   telephones and e-mail, then this block. From a laptop up they share
   one row: the details on the left, the form on the right, so the
   visitor sees every way to reach the studio at once instead of
   scrolling past the address to find the form. The page's grid
   (page.css) has a single content track; here only that track is split
   in two at the same total width (--page-content-tracks, so the gutters
   stay page.css's alone), both edges still line up with the header and
   the footer, and dense packing lets the form take the row the details
   already started. The selector only matches a page where a text block
   comes right before the contact block, so any other page keeps
   page.css's grid untouched. */
@media (min-width: 64em) {
  .page:has(> .block-text + .block-contact) {
    --page-content-tracks:
      [content-start] minmax(0, calc(var(--content-max-width) * 0.38))
      [form-start] minmax(0, calc(var(--content-max-width) * 0.62))
      [content-end];

    grid-auto-flow: row dense;
  }

  /* One column inside the details, whatever text.css does with a text
     block this wide elsewhere: a margin column inside a column would
     leave the address three words wide. The gap between the details
     and the form is the details' own padding, not a column-gap, which
     would also open between the gutters and the content and push both
     edges away from the header's. */
  .page > .block-text:has(+ .block-contact) {
    display: block;
    grid-column: content-start / form-start;
    padding-inline-end: var(--space-7);
  }

  /* Side by side, the two columns start on the same line, so the rule
     that separated them on a phone goes. */
  .page > .block-text + .block-contact {
    grid-column: form-start / content-end;
    padding-block-start: 0;
    border-block-start: 0;
  }
}

/* ==============================================================================
   CONTACT FORM FIELDS
   ============================================================================== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-group label {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* Square, like the showcase's controls (doc/07), and outlined in the
   strong --border-color: the outline is how a visitor finds the field,
   so it needs the 3:1 the decorative --border-light does not reach
   (WCAG 1.4.11; 3.34:1 on the paper in the light theme). font: inherit
   keeps Poppins and the body size, which also stops iOS from zooming
   into a field set under 16 px. */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: 0;
  background: var(--paper-bg);
  color: var(--text-primary);
  font: inherit;
  line-height: 1.5;
  transition: border-color 0.15s ease;
}

.form-group input:hover,
.form-group textarea:hover {
  border-color: var(--text-muted);
}

.form-group textarea {
  min-height: 9rem;
  resize: vertical;
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--focus-ring);
}

/* A field that failed gets a heavier border in the error colour, so the
   state does not depend on the hue alone: the message under it names
   the problem, and the border's weight says which field it belongs to. */
.form-group [aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 1px var(--color-danger);
}

.form-error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

/* The banner above the fields: the same colour as a field error, a step
   bolder, with a rule in that colour on its left so it reads as a note
   pinned to the form rather than one more line of copy. */
.form-alert {
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-inline-start: 3px solid var(--color-danger);
  background: var(--paper-bg);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.form-actions {
  display: flex;
  justify-content: flex-start;
}

/* The corner and the font come from _buttons.css; here the button only
   gets wider padding, so it reads as the form's one action and not as
   one more field. */
.contact-form .btn {
  padding-inline: var(--spacing-xl);
}

/* Honeypot: outside the viewport for people, present in the DOM for bots */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==============================================================================
   "RECEIVED"
   ============================================================================== */

/* The notice layout.html shows once, right after the form redirected
   back here with ?sent=1. The toast's position and entrance belong to
   main.css; here it only loses the rounded corners and the green bar of
   the template's default for this site's square paper and a rule in the
   success colour. Two classes, so it holds over main.css, which loads
   after this file. */
.toast.toast-success {
  border: 1px solid var(--border-light);
  border-inline-start: 4px solid var(--color-success);
  border-radius: 0;
  color: var(--text-primary);
}