/* ==========================================================================
   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 {
  /* A full section's padding above one line of small print.

     It used to hold four social cards and needed the room to keep them off
     the contact section. Those have moved up to sit under the email address,
     where someone looking for a way to get in touch will actually find them,
     and what is left here is a copyright and a credit. A rule, some air, and
     the line — a colophon, not a section. */
  padding-block: var(--sp-7) 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; }

  /* The address and the four channels are one block, so they share an edge.
     Centred, the card shrank to its own content and sat 19px inside the row
     beneath it, which reads as a misalignment rather than as a hierarchy. */
  .c-mailcard { justify-self: stretch; }
  .c-contact__title,
  .c-contact__copy { text-align: center; }
}

/* --------------------------------------------------------------------------
   MOBILE: the foot of the footer

   The social cards above it are centred; the copyright and the credit were
   ranged left underneath them, which made the whole block look like it had
   slipped. Centred and stacked, with the credit under the copyright rather
   than beside it.
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .c-site-footer__legal {
    display: grid;
    justify-content: center;
    justify-items: center;
    text-align: center;
    gap: var(--sp-4);
  }

  .c-site-footer__by { justify-content: center; }
}

/* --------------------------------------------------------------------------
   THE EMAIL ADDRESS ON A 320px SCREEN

   `contact@alexinmalta.com` is on the no-wrap list and needs 209px inside a
   134px box, which was the last thing putting horizontal scroll on the whole
   document at the narrowest phone width.

   `anywhere` rather than `break-word`: the browser is allowed to break inside
   the address because there is no alternative, and an address broken after
   the @ still reads as one. This applies at 320-ish only; at every width the
   client will actually see, it stays on its line.
   -------------------------------------------------------------------------- */

@media (max-width: 26rem) {
  .c-mailcard__text b,
  .c-mailcard__text small {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}