/* ==========================================================================
   COMPONENT — .c-consult
   Booking a consultancy, handled by Calendly rather than by a form that
   emails someone who then emails back to agree a time.

   THE WIDGET IS A THIRD-PARTY IFRAME. It cannot inherit our tokens and it
   cannot follow the visitor's light/dark preference after render, so it is
   given an explicit limestone plate to sit on in BOTH schemes and framed as a
   deliberate inset panel. Pretending it is part of the page and letting it
   fight the dark theme would look worse than framing it honestly.

   The script is not loaded until the section is near the viewport, and there
   is a plain link underneath that works whether or not it ever loads.
   WP Phase 2 target: template-parts/sections/consult.php
   ========================================================================== */

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

.c-consult__shell { row-gap: var(--sp-6); align-items: start; justify-items: center; }

/* --- The head, centred above the scheduler ------------------------------- */

.c-consult__intro {
  grid-column: content-start / content-end;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.c-consult__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-consult__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--c-accent-text);
}

.c-consult__copy {
  max-inline-size: none;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

.c-consult__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
}

.c-consult__meta div {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border: 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;
  white-space: nowrap;
}

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

/* --- Right: the scheduler ------------------------------------------------- */


.c-consult__panel {
  /* Measured, not guessed. Calendly switches between two layouts on the
     width of the frame:

         >= ~1030px   two columns, 687px tall
         <  ~1000px   one column,  909px tall

     Full rail keeps the two-column layout but strands the card in a wide
     empty frame, because Calendly centres a fixed-width card and pads the
     rest. 67rem is the narrowest cap that still clears the breakpoint, so
     the layout stays compact and the padding either side stays small. */
  grid-column: content-start / content-end;
  max-inline-size: 67rem;
  margin-inline: auto;
  inline-size: 100%;
  position: relative;
  padding: var(--sp-3);
  border: var(--bw-hair) solid var(--c-line-strong);
  background: var(--c-bg-alt);
}

/* --------------------------------------------------------------------------
   MAKING THE CALENDLY IFRAME DARK

   Calendly gives three query parameters — background_color, text_color and
   primary_color, hex without the '#'. They colour the booking CARD, and they
   work: the card goes dark on its own. What they do NOT colour is the page
   the card sits on inside the iframe, which stays white and shows as a band
   around the card.

   That white is painted by Calendly's document, not by the iframe element.
   Tested directly: setting a background on the <iframe> from this page does
   not show through it. Nothing in this stylesheet can reach inside a
   cross-origin frame, so it cannot be recoloured. It can only be inverted.

   So the widget is handed the LIGHT palette and the whole frame is flipped.
   This site's two schemes are near-inverses of each other, which is what
   makes the trick land on the right colours rather than approximately dark:

       #EAF1F6  --invert-plate  inverted -> a cool near-black, ~slate-900
       #0D0A06  --invert-ink    inverted -> a warm cream,      ~stone-50
       #FFFFFF  the gutter      inverted -> ~#000000

   The pair is deliberately cool-light and warm-dark: the flip preserves hue
   and reverses lightness, so a warm plate would have landed on a brown card
   in a slate section. Sending the opposite temperature is what puts it back.

   hue-rotate(180deg) puts the hues back where invert() moved them, so the
   blue stays blue rather than turning orange. brightness lifts the inverted
   white off pure black and onto the section's own ground.

   The filter applies ONLY on the dark scheme. On limestone the widget is
   already the right colour and is left alone.

   The cost is honest: anything pictorial inside the frame would render as a
   negative. This booking view carries no photography — text, icons and rules
   only — which is the condition that makes this safe here.
   -------------------------------------------------------------------------- */

.c-consult__stage {
  /* On limestone nothing is inverted, so the widget is handed the section's
     real colours and renders correctly on its own. */
  --calendly-bg:      var(--c-bg-alt);
  --calendly-text:    var(--c-ink);
  --calendly-primary: var(--luzzu-blue-600);

  position: relative;
  /* A floor for the holding message only; once Calendly reports its height
     the widget inside is taller than this and the stage follows it. */
  min-block-size: 26rem;
  background: var(--c-bg-alt);
}

/* On slate the frame is flipped, so the palette handed over is the flipped
   one. The two always change together — the swap and the filter are the same
   decision, so they live in the same rule. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-consult__stage {
    --calendly-bg:   var(--invert-plate);
    --calendly-text: var(--invert-ink);
  }
  :root:not([data-theme="light"]) .c-consult__stage iframe {
    filter: invert(1) hue-rotate(180deg) brightness(1.06) contrast(0.96);
  }
}

[data-theme="dark"] .c-consult__stage {
  --calendly-bg:   var(--invert-plate);
  --calendly-text: var(--invert-ink);
}

[data-theme="dark"] .c-consult__stage iframe {
  filter: invert(1) hue-rotate(180deg) brightness(1.06) contrast(0.96);
}

.c-consult__stage .calendly-inline-widget {
  position: relative;
  z-index: 1;
  min-inline-size: 100%;
  /* No fixed height. Calendly measures its own content and sets the height
     inline; capping it here is what forced a scrollbar inside the frame. */
}

/* Held state: shown until Calendly paints over it. */
.c-consult__holding {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  text-align: center;
  color: var(--c-ink-muted);
}

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

.c-consult__holding svg {
  inline-size: 2rem;
  block-size: auto;
  color: var(--c-accent-text);
}

/* The fallback. Always present, so a blocked script is never a dead end. */
.c-consult__fallback {
  grid-column: content-start / content-end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-block-start: var(--sp-4);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

@media (max-width: 68rem) {
  .c-consult__intro,
  .c-consult__panel,
  .c-consult__fallback { grid-column: content-start / content-end; }
  .c-consult__stage { min-block-size: 26rem; }
}

/* ==========================================================================
   COMPONENT — .c-contact
   The general enquiry section: an address and a short form for anything that
   is not a booking. Kept separate from the consultancy on purpose — a person
   asking one question should not be sent into a scheduler.
   WP Phase 2 target: template-parts/sections/contact.php
   ========================================================================== */

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

.c-contact__shell { row-gap: var(--sp-7); align-items: start; }
.c-contact__intro { grid-column: content-start / span 4; }

.c-contact__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-contact__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--c-accent-text);
}

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

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

@media (max-width: 68rem) {
  .c-contact__intro { grid-column: content-start / content-end; }
  .c-contact__form  { grid-column: content-start / content-end; }
}

@media (max-width: 40rem) {
  .c-contact__form { grid-template-columns: minmax(0, 1fr); }
}

/* Once Calendly reports it has painted, the holding message goes. */
.c-consult__stage[data-calendly-ready] .c-consult__holding { display: none; }