/* ==========================================================================
   COMPONENT — .c-booking  +  .c-site-footer
   The consultancy gateway and the closing plate. The form is set as an
   editorial document — underline rules, mono labels, no boxed inputs.
   WP Phase 2 targets:
     template-parts/sections/booking.php
     footer.php
   ========================================================================== */

.c-booking {
  padding-block: var(--section-pad);
  background: var(--c-bg-alt);
  color: var(--c-ink);
}

.c-booking__shell { row-gap: var(--sp-8); }

.c-booking__intro { grid-column: content-start / span 4; }

.c-booking__title {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: var(--fw-light);
  font-size: var(--fs-3xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

.c-booking__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--c-accent-text);
}

.c-booking__copy {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

.c-booking__meta {
  margin-block-start: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
}

.c-booking__meta div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-block-start: var(--bw-hair) solid var(--c-line);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
}

.c-booking__meta dt { color: var(--c-ink-muted); }

/* --------------------------------------------------------------------------
   Form — columns 6 to 12.
   -------------------------------------------------------------------------- */

.c-booking__form {
  grid-column: col 6 / content-end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.c-field { display: grid; gap: var(--sp-3); }
.c-field--wide { grid-column: span 2; }

.c-field label {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.c-field label span { color: var(--c-accent-text); }

.c-field input,
.c-field select,
.c-field textarea {
  inline-size: 100%;
  padding: var(--sp-2) 0;
  border: 0;
  border-block-end: var(--bw-hair) solid var(--c-line-strong);
  border-radius: 0;
  background: none;
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.c-field textarea { resize: vertical; min-block-size: 5rem; line-height: var(--lh-snug); }

.c-field input:focus,
.c-field select:focus,
.c-field textarea:focus {
  outline: none;
  border-block-end-color: var(--c-accent);
}

.c-field input::placeholder,
.c-field textarea::placeholder { color: var(--c-ink-muted); }

/* Native select, restyled without hiding the control. */
.c-field select {
  appearance: none;
  padding-inline-end: var(--sp-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.55rem center, right 0.25rem center;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.c-field__error {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-accent-text);
  min-block-size: 1em;
}

.c-field[data-invalid] input,
.c-field[data-invalid] select,
.c-field[data-invalid] textarea { border-block-end-color: var(--c-accent); }

.c-booking__submit {
  grid-column: span 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}

.c-booking__consent {
  flex: 1;
  min-inline-size: 14rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  line-height: 1.6;
}

.c-booking__status {
  grid-column: span 2;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.c-site-footer {
  padding-block: var(--section-pad) var(--sp-6);
  background: var(--slate-950);
  color: var(--stone-300);
  overflow: clip;
}

.c-site-footer__shell { row-gap: var(--sp-8); }

.c-site-footer__cta { grid-column: content-start / span 6; }

.c-site-footer__channel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 22%, transparent);
  color: var(--stone-50);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.c-site-footer__channel:hover {
  border-color: var(--c-accent-text);
  background: color-mix(in oklab, var(--stone-50) 5%, transparent);
}

.c-site-footer__channel svg { inline-size: 1.6rem; block-size: auto; color: var(--c-accent-text); flex: none; }

.c-site-footer__channel b {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.c-site-footer__channel small {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--slate-300);
}

/* Nav columns, pushed right of the half. */
.c-site-footer__nav {
  grid-column: col 8 / content-end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.c-site-footer__col h3 {
  margin-block-end: var(--sp-4);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--slate-300);
}

.c-site-footer__col ul { display: grid; gap: var(--sp-3); }

.c-site-footer__col a {
  font-size: var(--fs-sm);
  color: var(--stone-100);
  transition: color var(--dur-fast) var(--ease-out);
}

.c-site-footer__col a:hover { color: var(--c-accent-text); }

/* Closing wordmark. Sized off the CONTENT RAIL rather than the viewport, so
   it fills the measure exactly instead of overflowing its own padding — the
   old 12.4vw value ran past the edge on every screen narrower than a desktop. */
.c-site-footer__mark {
  grid-column: content-start / content-end;
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2vw, var(--sp-7));
  margin-block-start: var(--sp-8);
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: var(--fw-light);
  font-size: clamp(2.25rem, 0.6rem + 6.6vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: color-mix(in oklab, var(--stone-50) 22%, transparent);
  white-space: nowrap;
  user-select: none;
  overflow: hidden;
}

.c-site-footer__eye {
  inline-size: clamp(2.5rem, 1rem + 6vw, 6rem);
  block-size: auto;
  flex: none;
  color: color-mix(in oklab, var(--stone-50) 34%, transparent);
}

.c-site-footer__mark em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
}

.c-site-footer__legal {
  grid-column: content-start / content-end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  border-block-start: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 16%, transparent);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--slate-300);
}

.c-site-footer__legal a { transition: color var(--dur-fast) var(--ease-out); }
.c-site-footer__legal a:hover { color: var(--stone-50); }

@media (max-width: 68rem) {
  .c-booking__intro { grid-column: content-start / content-end; }
  .c-booking__form  { grid-column: content-start / content-end; }
  .c-site-footer__cta { grid-column: content-start / content-end; }
  .c-site-footer__nav { grid-column: content-start / content-end; }
}

@media (max-width: 40rem) {
  .c-booking__form { grid-template-columns: minmax(0, 1fr); }
  .c-field--wide, .c-booking__submit, .c-booking__status { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   THE MAIL CARD
   Sits under the consultancy form for people who would rather just write.
   -------------------------------------------------------------------------- */

.c-mailcard {
  grid-column: col 6 / content-end;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5);
  margin-block-start: var(--sp-6);
  padding: var(--sp-5);
  border: var(--bw-hair) solid var(--c-line-strong);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.c-mailcard:hover {
  border-color: var(--c-accent);
  background: color-mix(in oklab, var(--c-accent) 7%, transparent);
  transform: translateY(-0.25rem);
}

.c-mailcard__glyph {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border: var(--bw-hair) solid var(--c-line-strong);
  color: var(--c-accent-text);
}

.c-mailcard__glyph svg { inline-size: 1.25rem; block-size: auto; }

.c-mailcard__text small {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  white-space: nowrap;
}

.c-mailcard__text b {
  display: block;
  margin-block-start: var(--sp-2);
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

.c-mailcard__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-accent-text);
  white-space: nowrap;
}

.c-mailcard__cue svg { inline-size: 1.5rem; block-size: auto; transition: transform var(--dur-base) var(--ease-out); }
.c-mailcard:hover .c-mailcard__cue svg { transform: translateX(0.4rem); }

/* --------------------------------------------------------------------------
   FOOTER — socials, one rule, a copyright line and the build credit.
   No menu (every link is one scroll away) and no oversized wordmark.
   -------------------------------------------------------------------------- */

.c-site-footer__socials {
  grid-column: content-start / content-end;
}

.c-site-footer__by {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--slate-300);
  transition: color var(--dur-fast) var(--ease-out);
}

.c-site-footer__by span {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  white-space: nowrap;
}

.c-site-footer__by img {
  block-size: 1.4rem;
  inline-size: auto;
  opacity: 0.72;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.c-site-footer__by:hover { color: var(--stone-50); }
.c-site-footer__by:hover img { opacity: 1; }

@media (max-width: 56rem) {
  .c-mailcard { grid-column: content-start / content-end; grid-template-columns: 3rem minmax(0, 1fr); row-gap: var(--sp-4); }
  .c-mailcard__cue { grid-column: 1 / -1; }
}


/* --------------------------------------------------------------------------
   MOBILE: the contact head
   Centred to match every other section head on a phone.
   -------------------------------------------------------------------------- */

@media (max-width: 68rem) {
  .c-contact__intro { text-align: center; justify-items: center; }
  .c-contact__title,
  .c-contact__copy { text-align: center; }
}