/* ==========================================================================
   MAGIK: pieces only the contact page has (/contact). Loaded after
   css/magik.css and css/pages/master.css; the page is built from the
   division components (the ink hero, rows, the eyebrow and the section
   head), and nothing here restyles a shared piece.

     1  The hero: the four ways in, as rows beside the title
     2  The enquiry scene: the desk, its room band, the numbered parts
     3  Pathways inside the form: the trust lines and the under-18 stop
     4  Send, and the result panels
     5  What happens next

   The thank-you page no longer loads this file (it is built from the
   shared pieces and css/pages/master.css).

   Cache: /css/pages/contact.css?v=N on /contact; bump N when it changes.
   ========================================================================== */


/* 1  THE HERO ---------------------------------------------------------------
   The ways in sit beside the title as rows (label, the number or address,
   the arrow); the office is not a link, so the map search sits under it.
   The in-page jump uses the shared .m-arrow--down (css/magik.css section 9). */
.c-lines{ min-width:0; }
.c-lines-head{ margin-bottom:14px; }
.c-lines .dv-rows{ --dv-row-label:104px; }
.c-lines .dv-row-label{ font-size:12px; font-weight:600; letter-spacing:.16em; line-height:16px; text-transform:uppercase; color:var(--m-muted); }
.c-lines .dv-row-line{
  font-size:clamp(18px, 1.46vw, 21px); font-weight:500; line-height:1.35; color:var(--m-text);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.c-line-place .dv-row-line{ font-weight:400; }
/* the office's note under the address (Visits by arrangement) */
.c-lines .dv-row-line small{
  display:block; margin:6px 0 0;
  font-size:12px; font-weight:600; letter-spacing:.14em; line-height:16px; text-transform:uppercase; color:var(--m-muted);
}
.c-line-map{ margin-top:8px; }
.c-lines a.dv-row:hover .dv-row-line{ text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px; }
@media (max-width:460px){
  .c-lines .dv-row-line small{ margin-top:4px; }
}


/* 2  THE ENQUIRY SCENE ----------------------------------------------------
   The head (and, on wide screens, what happens next) sits in the left
   column; the desk holds the form on the right. On a phone the order is
   head, form, next. */
.c-enquire-grid{
  display:grid; gap:48px;
  grid-template-columns:minmax(0, 1fr);
  grid-template-areas:"head" "desk" "next";
}
.c-enquire-head{ grid-area:head; }
.c-enquire-head .dv-h2{ max-width:11em; }
.c-enquire-lede{ max-width:460px; margin-top:20px; font-size:17px; line-height:1.6; color:var(--m-text-2); }
.c-desk{ grid-area:desk; min-width:0; max-width:760px; }
.c-next{ grid-area:next; min-width:0; }
@media (min-width:1100px){
  .c-enquire-grid{
    grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:"head desk" "next desk";
    column-gap:clamp(56px, 6.6vw, 128px); row-gap:0;
  }
  .c-next{ align-self:start; margin-top:64px; }
}

/* The room band: the desk takes the chosen world's light. Master ink until
   a world is chosen; velvet for Creative, the booth's graphite for Tech,
   laterite for Pathways. A change of light level, never movement. */
.c-desk{ --c-room:var(--m-ink); }
.c-desk[data-room="creative"]{ --c-room:var(--c-velvet); }
.c-desk[data-room="tech"]{ --c-room:var(--t-room); }
.c-desk[data-room="pathways"]{ --c-room:var(--p-laterite); }
.c-desk-cue{ margin-bottom:16px; }
.c-desk-band{
  height:4px; background-color:var(--c-room);
  transition:background-color var(--m-light) var(--m-dimmer);
}

/* the form is composed as numbered parts, like a programme */
.c-form{ max-width:none; gap:0; }
.c-part{ min-width:0; margin:0; padding:28px 0 40px; border:0; }
.c-part + .c-part{ border-top:1px solid var(--m-rule); }
.c-part-head{
  display:block; float:left; width:100%; padding:0; margin:0 0 24px;
  font-size:20px; font-weight:600; line-height:1.3; color:var(--m-text);
}
.c-part-num{
  margin-right:10px;
  font-family:var(--m-instrument); letter-spacing:var(--m-instrument-track); font-size:14px; font-weight:400; font-variant-numeric:tabular-nums;
  color:var(--m-red-text);
}
.c-part-body{ clear:both; display:grid; gap:24px; min-width:0; }
/* a row whose fields all belong to another world takes no space */
.c-part-body > .m-form-row:not(:has(> .m-field:not([hidden]))){ display:none; }
/* notes written for visitors without scripts ("Tech only"): with the
   script, only the chosen world's fields show, so the note goes */
.c-form.is-enhanced .c-scope{ display:none; }

/* the searchable service picker keeps a dropdown's chevron */
.c-combo.m-combo::after{
  content:""; position:absolute; right:19px; top:24px; width:8px; height:8px; pointer-events:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg); color:var(--m-text);
}
.c-combo .m-combo-input{ cursor:pointer; }
.c-combo .m-combo-input:focus{ cursor:text; }
.m-field.is-invalid .m-check{ color:var(--m-text); }
.m-field.is-invalid .m-check input{ outline:2px solid var(--m-error); outline-offset:1px; }


/* 3  PATHWAYS INSIDE THE FORM ----------------------------------------------
   The part carries the Pathways room (deep earth type, olive labels) on the
   same #FFFCFC ground. The guardian-first line comes first, then who is
   writing. */
.c-part--pathways .c-part-num{ color:var(--m-red-press); }
.c-trust{ list-style:none; display:grid; gap:10px; max-width:600px; }
.c-trust li{
  position:relative; padding-left:22px;
  font-size:16px; line-height:1.55; color:var(--m-text);
}
.c-trust li::before{
  content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; background:var(--p-laterite);
}
.c-trust strong{ font-weight:600; }

/* a player under 18 is stopped kindly: nothing is taken from them, and they
   are given a way to send the page to a parent or guardian */
.c-stop{
  padding:24px; border:1px solid var(--m-line); border-top:4px solid var(--p-laterite);
}
.c-stop p:where(:not(.m-h3, .m-hint)){ font-size:16px; line-height:1.55; color:var(--m-text); max-width:560px; }
.c-stop .m-h3 + p{ margin-top:10px; }
.c-stop-note{ margin-top:10px; }
.c-stop-actions{ margin-top:20px; gap:12px; }
.c-copy-status{ margin-top:10px; }
.c-copy-status:empty{ display:none; }


/* 4  SEND, AND THE RESULT --------------------------------------------------- */
.c-send{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; padding-top:8px; }
.c-send-btn{ min-width:200px; }
.c-send-error{ flex:1 1 240px; }
.c-form[aria-busy="true"] .c-send-btn{ cursor:progress; }

.c-status{ scroll-margin-top:calc(var(--m-header-h) + 24px); }
.c-status p:where(:not(.m-h2, .m-h3, .m-hint)){ font-size:17px; line-height:1.55; color:var(--m-text-2); max-width:600px; }
.c-status p{ overflow-wrap:anywhere; }
.c-status .m-h3{ color:var(--m-text); }
.c-status .m-h3 + p{ margin-top:10px; }
.c-status .c-status-title{ color:var(--m-text); }
.c-status .c-status-title + p{ margin-top:14px; }
.c-status p + p{ margin-top:10px; }
.c-status--ok{ margin-top:28px; border-color:var(--m-line); }
/* red is the signal that something is done: the square, as in the title */
.c-status .c-status-kicker{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  font-size:12px; font-weight:600; letter-spacing:.18em; line-height:16px;
  text-transform:uppercase; color:var(--m-text);
}
.c-status-mark{ flex:none; width:8px; height:8px; background:var(--m-red); }
.c-status--err{ margin-top:28px; border-color:var(--m-text); }
.c-status-lines{ list-style:none; margin-top:12px; }
.c-status-lines a{ display:inline-flex; align-items:center; min-height:44px; font-size:16px; }
.c-status-copy{ margin-top:16px; }
.c-nowrap{ white-space:nowrap; }


/* 5  WHAT HAPPENS NEXT ------------------------------------------------------
   Three plain rows: what happens, then one line on how. */
.c-next-head{ margin-bottom:14px; }
.c-next .dv-row{ grid-template-columns:minmax(0, 1fr); }
.c-next .dv-row-line{ max-width:440px; }