/* ==========================================================================
   Booking landing page (Preston system)

   Conversion-optimised booking flow. Hand-written; depends on ir-tokens.css.
   Loaded only by page-templates/booking.php.

   Architecture: one route, two steps. Step 1 qualifies in three fields, then
   step 2 (the HubSpot meetings embed) reveals in place beneath it. The old
   split between /booking/ and /booking-calendar/ cost a page transition and
   an email round-trip between intent and a booked meeting.

   Why the form is native markup rather than the [booking_form] shortcode:
   that shortcode emits [hubspot type=form ...], which the current HubSpot
   embed renders inside a CROSS-ORIGIN IFRAME (<iframe id="hs-form-iframe-0">).
   Nothing in this file — or any stylesheet — can reach inside it. The theme's
   own .hbspt-form input rules at main.css:14099+ are dead code for exactly
   this reason. Labels, field count, button colour and error copy are only
   controllable by owning the markup, so the form here posts directly to the
   HubSpot Forms API. See assets/js/ir-booking.js.

   This file introduces .ir-field, the form component the design system did
   not previously define (DESIGN-SYSTEM.md §4 covered buttons and chrome
   only). Promote it to the system doc if a second page needs a form.

   Everything is scoped under .ir-booking, so no rule leaks out and legacy
   selectors on bare elements do not reach in.
   ========================================================================== */

.ir-booking {
  font-family: var(--ir-font);
  color: var(--ir-text);
  background: var(--ir-white);
}

.ir-booking *,
.ir-booking *::before,
.ir-booking *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Scoped reset — REQUIRED, not defensive politeness.

   This page uses form, label, input, textarea, button, ul and a. The theme
   styles all of them globally and those rules reach inside any markup that
   uses them:

     input { height: 52px; border: none; background: #f5f5f7;
             padding: 20px 27px; border-radius: 10px;
             font-size: 1.7rem }              main.css:10450
     input:focus { outline: none !important }  main.css:10463  <- a11y failure
     textarea { height: 110px; border: 0 }     main.css:10495
     button { font-family: "primary-regular" } main.css:10102

   A class selector outranks them, but only for properties it actually
   declares. Anything left undeclared silently inherits the legacy value.

   `section` is deliberately NOT in this list — the same mistake documented in
   ir-pricing.css. At 0,1,1 it would outrank every section skin below it
   (0,1,0) and flatten the hero, the proof band and the dark CTA to white.
   -------------------------------------------------------------------------- */

.ir-booking input,
.ir-booking textarea,
.ir-booking select,
.ir-booking button {
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  transition: none;
  -webkit-appearance: none;
          appearance: none;
}

.ir-booking ul,
.ir-booking ol { margin: 0; padding: 0; list-style: none; }

/* main.css:562 `ul li` adds padding-left:25px, margin-top:15px and
   position:relative, and main.css:571 `ul li::before` drops an absolutely
   positioned 6px dot in MINT #7DF4DC into every list item — the frozen legacy
   accent, which DESIGN-SYSTEM.md §1 forbids on new pages. `list-style: none`
   does not remove a generated pseudo-element; only `content: none` does.

   Any list below that wants its own marker must out-specify this rule, which
   is why those selectors carry .ir-booking as well as their own class. */
.ir-booking ul li,
.ir-booking ol li {
  padding-left: 0;
  margin-top: 0;
  position: static;
  line-height: inherit;
}

/* `content: none` stops the mint dot being generated at all. The position
   reset matters for any component below that puts `content` BACK: main.css
   also sets position:absolute / left:5px / top:7px on this pseudo-element,
   and a component rule that declares only content and background inherits
   that positioning silently — the marker then escapes its list item (which
   this same reset makes position:static) and lands somewhere off the page,
   taking the item's grid layout with it. Neutralise it once, here. */
.ir-booking ul li::before,
.ir-booking ol li::before {
  content: none;
  position: static;
  inset: auto;
}

.ir-booking a { transition: none; }

.ir-booking p { margin: 0; }

/* Legacy sets `font-family: "primary-bold"` on h1–h6 (main.css:251) plus
   margin-bottom:50px and color:#222. A class selector outranks it only for
   properties it declares — leaving font-family out is why weight 600 never
   rendered: the browser was handed the bold font file whatever the weight
   said. Declare all four. */
.ir-booking h1,
.ir-booking h2,
.ir-booking h3,
.ir-booking h4 {
  margin: 0;
  color: var(--ir-ink);
  font-family: var(--ir-font);
  font-weight: 600;          /* 600, never 700 — DESIGN-SYSTEM.md §2 */
  text-wrap: balance;
}

/* The theme does not define this and WordPress does not add it. */
.ir-booking .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.ir-booking__wrap {
  max-width: var(--ir-wrap);
  margin: 0 auto;
  padding-inline: var(--ir-gutter);
}

.ir-booking__section { padding: 72px 0; }
.ir-booking__section--tight { padding: 48px 0; }

.ir-booking__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--ir-brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ir-booking__eyebrow::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: var(--ir-radius-pill);
  background: var(--ir-brand);
}

/* --------------------------------------------------------------------------
   Hero — split, form top-aligned.

   The legacy booking page opened with ~250px of clearance above the h1 (a
   leftover from when the header was position:fixed; it is sticky now, so the
   padding is purely additive) and pushed the first field to ~600px. Here the
   grid puts field one and the CTA inside the first screen.
   -------------------------------------------------------------------------- */

.ir-booking__hero {
  background: linear-gradient(180deg, var(--ir-wash) 0%, var(--ir-white) 100%);
  padding: 64px 0 56px;
}

/* Named areas rather than source order: on mobile the card moves up to sit
   directly under the headline, while the outcome bullets drop below it. A
   plain `order: -1` on the card would put a form above the reader's first
   clue about what the page is. */
.ir-booking__hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-areas:
    "intro card"
    "gets  card";
  /* The card spans both rows and is taller than the copy beside it. Without
     an explicit row sizing the surplus height is shared between the rows and
     opens a gap between the lede and the bullets. */
  grid-template-rows: auto 1fr;
  gap: 0 48px;
  align-items: start;
}

.ir-booking__intro { grid-area: intro; }
.ir-booking__gets  { grid-area: gets; }
.ir-booking__card  { grid-area: card; }

.ir-booking__title {
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.ir-booking__lede {
  margin-top: 18px;
  max-width: 60ch;
  color: var(--ir-text);
  font-size: 19px;
  line-height: 1.6;
  text-wrap: pretty;
}

.ir-booking__gets {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.ir-booking .ir-booking__gets li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  color: var(--ir-text);
  font-size: 16px;
  line-height: 1.55;
}

.ir-booking .ir-booking__gets li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 9px;
  border-radius: var(--ir-radius-pill);
  background: var(--ir-brand);
}

/* --------------------------------------------------------------------------
   The form card — the one lifted object on the page.
   Same skin as .ir-plan in ir-pricing.css.
   -------------------------------------------------------------------------- */

.ir-booking__card {
  position: sticky;
  top: 96px;                       /* clears the sticky site header */
  padding: 24px;
  border: 1px solid var(--ir-line);
  border-radius: var(--ir-radius-lg);
  background: var(--ir-white);
  box-shadow: var(--ir-shadow-lift);
}

.ir-booking__card-title {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* Progress — two steps is the maximum worth indicating. */
.ir-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.ir-steps__dot {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--ir-line);
  border-radius: var(--ir-radius-pill);
  color: var(--ir-faint);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* State is carried by fill AND glyph, never colour alone — §8. */
.ir-steps__dot.is-active,
.ir-steps__dot.is-done {
  border-color: var(--ir-brand);
  background: var(--ir-brand);
  color: var(--ir-white);
}

.ir-steps__bar {
  width: 36px; height: 1px;
  background: var(--ir-line);
}

.ir-steps__bar.is-filled { background: var(--ir-brand); }

.ir-steps__cap {
  margin-left: 4px;
  color: var(--ir-muted);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   .ir-field — the form component the design system was missing.

   Persistent labels, not placeholders: a placeholder disappears the moment
   someone types, so nobody can check their own answers before submitting,
   and its contrast on an unfilled field sits below 4.5:1. Placeholder-only
   labelling also fails WCAG 3.3.2.
   -------------------------------------------------------------------------- */

.ir-field {
  display: grid;
  gap: 5px;
  margin-top: 16px;
}

.ir-field__label {
  color: var(--ir-ink);
  font-size: 13px;
  font-weight: 500;
}

.ir-booking .ir-field__input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--ir-line);
  border-radius: var(--ir-radius-sm);   /* 8px — inputs, not 14px cards */
  background: var(--ir-white);
  color: var(--ir-ink);
  font-size: 16px;                      /* 16px stops iOS zooming on focus */
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ir-booking .ir-field__input::placeholder {
  color: var(--ir-faint);
  opacity: 1;
}

.ir-booking textarea.ir-field__input {
  min-height: 84px;
  resize: vertical;
}

/* The theme sets `input:focus { outline: none !important }`. Restoring a
   visible focus state is not optional — DESIGN-SYSTEM.md §8. */
.ir-booking .ir-field__input:focus,
.ir-booking .ir-field__input:focus-visible {
  outline: none;
  border-color: var(--ir-brand);
  box-shadow: 0 0 0 3px rgba(74, 53, 240, .18);
}

.ir-field__help {
  color: var(--ir-faint);
  font-size: 12.5px;
  line-height: 1.5;
}

.ir-booking .ir-field.is-error .ir-field__input { border-color: var(--ir-danger); }

.ir-booking .ir-field.is-error .ir-field__input:focus,
.ir-booking .ir-field.is-error .ir-field__input:focus-visible {
  box-shadow: 0 0 0 3px rgba(194, 65, 12, .16);
}

.ir-field__error {
  display: none;
  gap: 6px;
  align-items: flex-start;
  color: var(--ir-danger);
  font-size: 12.5px;
  line-height: 1.5;
}

.ir-field.is-error .ir-field__error { display: flex; }

/* Shape as well as colour, so the state survives greyscale. */
.ir-field__error::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 14px; height: 14px;
  margin-top: 2px;
  border-radius: var(--ir-radius-pill);
  background: var(--ir-danger);
  color: var(--ir-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.ir-booking .ir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: var(--ir-radius-md);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, box-shadow 160ms ease;
}

.ir-booking .ir-btn:focus-visible {
  outline: 2px solid var(--ir-brand);
  outline-offset: 3px;
}

.ir-booking .ir-btn--primary {
  background: var(--ir-brand);
  color: var(--ir-white);
  box-shadow: var(--ir-shadow-cta);
}

.ir-booking .ir-btn--primary:hover { background: var(--ir-brand-hover); }

.ir-booking .ir-btn--secondary {
  border: 1px solid var(--ir-line-btn);
  background: var(--ir-white);
  color: var(--ir-ink);
}

.ir-booking .ir-btn--secondary:hover { background: var(--ir-wash); }

.ir-booking .ir-btn--ghost {
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: var(--ir-white);
}

.ir-booking .ir-btn--ghost:hover { border-color: rgba(255, 255, 255, .55); }

.ir-booking .ir-btn--block { width: 100%; }

.ir-booking .ir-btn[disabled] {
  opacity: .6;
  cursor: progress;
}

/* Reassurance row — answers time cost, sales pressure and data risk in the
   three seconds before the click. Reuses the pricing chip skin. */
.ir-booking__reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.ir-booking .ir-booking__reassure li {
  padding: 5px 11px;
  border: 1px solid var(--ir-line-pill);
  border-radius: var(--ir-radius-pill);
  background: var(--ir-wash);
  color: var(--ir-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Submit-level failure. Never blocks the booking: the fallback link goes
   straight to the hosted calendar. */
.ir-booking__formerror {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ir-danger);
  border-radius: var(--ir-radius-sm);
  background: var(--ir-danger-tint);
  color: var(--ir-danger);
  font-size: 13.5px;
  line-height: 1.55;
}

.ir-booking__formerror.is-shown { display: block; }
.ir-booking__formerror a { color: inherit; font-weight: 500; }

/* --------------------------------------------------------------------------
   Step 2 — the calendar, revealed in place.
   -------------------------------------------------------------------------- */

.ir-booking__step2 { scroll-margin-top: 96px; }

.ir-booking__step2[hidden] { display: none; }

.ir-booking__calendar {
  margin-top: 20px;
  min-height: 640px;
  border: 1px solid var(--ir-line);
  border-radius: var(--ir-radius-lg);
  background: var(--ir-white);
  overflow: hidden;
}

/* The calendar page this replaces had a 444-byte <main>: an iframe and a
   spacer. Any ad blocker or slow third-party load rendered a blank white
   page. A third-party iframe is never the only content here — this fallback
   is always in the markup, underneath it. */
.ir-booking__fallback {
  margin-top: 14px;
  color: var(--ir-muted);
  font-size: 13.5px;
  text-align: center;
}

.ir-booking__fallback a {
  color: var(--ir-brand);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Proof strip
   -------------------------------------------------------------------------- */

.ir-booking__proof {
  padding: 36px 0;
  background: var(--ir-wash);   /* ground change, so no border — §3 */
}

.ir-booking__proof-label {
  margin-bottom: 16px;
  color: var(--ir-faint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}

.ir-booking__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 40px;
}

.ir-booking__logos img {
  height: 24px;
  width: auto;
  filter: grayscale(1);
  opacity: .7;
}

/* --------------------------------------------------------------------------
   Call agenda — the one place numbering is honest, because the sequence is
   real. It also defuses the "is this just a sales call" objection.
   -------------------------------------------------------------------------- */

.ir-booking__agenda { background: var(--ir-wash-2); }

.ir-booking__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.ir-booking__step { border-top: 2px solid var(--ir-brand); padding-top: 14px; }

.ir-booking__step-num {
  color: var(--ir-brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ir-booking__step h3 {
  margin: 8px 0 6px;
  font-size: 20px;
  letter-spacing: -.01em;
}

.ir-booking__step p {
  color: var(--ir-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */

.ir-booking__quote {
  max-width: 46em;
  margin: 0 auto;
  text-align: center;
}

.ir-booking__quote blockquote {
  margin: 0;
  color: var(--ir-ink);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.ir-booking__cite {
  margin-top: 18px;
  color: var(--ir-muted);
  font-size: 15px;
  font-style: normal;
}

.ir-booking__cite b { color: var(--ir-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   FAQ — progressive disclosure, all closed at rest.
   -------------------------------------------------------------------------- */

.ir-booking__faq { max-width: 46em; margin: 32px auto 0; }

.ir-booking__faq details { border-bottom: 1px solid var(--ir-line); }

.ir-booking__faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  color: var(--ir-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.ir-booking__faq summary::-webkit-details-marker { display: none; }

.ir-booking__faq summary:focus-visible {
  outline: 2px solid var(--ir-brand);
  outline-offset: 2px;
  border-radius: var(--ir-radius-sm);
}

.ir-booking .ir-booking__faq summary::after {
  content: "+";
  flex: none;
  color: var(--ir-brand);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

.ir-booking .ir-booking__faq details[open] summary::after { content: "\2013"; }

.ir-booking__faq-answer {
  padding: 0 0 20px;
  max-width: 65ch;
  color: var(--ir-text);
  font-size: 15.5px;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Closing band — the only repeat of the CTA on the page.
   -------------------------------------------------------------------------- */

.ir-booking__cta {
  background: var(--ir-ink);
  text-align: center;
}

.ir-booking__cta h2 { color: var(--ir-white); }

.ir-booking__cta p {
  max-width: 52ch;
  margin: 14px auto 0;
  color: var(--ir-on-dark);
  font-size: 17px;
  line-height: 1.6;
}

.ir-booking__cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.ir-booking__h2 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.ir-booking__sub {
  margin-top: 12px;
  max-width: 60ch;
  color: var(--ir-muted);
  font-size: 17px;
  line-height: 1.6;
}

.ir-booking__center { text-align: center; }
.ir-booking__center .ir-booking__sub { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Sticky mobile CTA — appears once the form scrolls out of view.
   -------------------------------------------------------------------------- */

.ir-booking__sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: none;
  padding: 10px var(--ir-gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--ir-white);
  border-top: 1px solid var(--ir-line);
  box-shadow: 0 -8px 28px rgba(23, 16, 63, .10);
  transform: translateY(110%);
  transition: transform 200ms ease;
}

.ir-booking__sticky.is-shown { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Responsive — the system's three breakpoints, nothing else.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .ir-booking__hero-grid { gap: 36px; }
  .ir-booking__title { font-size: 40px; }
}

@media (max-width: 900px) {
  .ir-booking__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* Single column, and the form comes FIRST — the headline plus one proof
     line above it, everything else below. */
  .ir-booking__hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "card" "gets";
    gap: 28px;
  }
  .ir-booking__card { position: static; top: auto; }
  .ir-booking__title { font-size: 34px; }
  .ir-booking__lede { font-size: 17px; }
  .ir-booking__sticky { display: block; }
}

@media (max-width: 600px) {
  .ir-booking__section { padding: 56px 0; }
  .ir-booking__hero { padding: 40px 0 44px; }
  .ir-booking__title { font-size: 30px; }
  .ir-booking__h2 { font-size: 27px; }
  .ir-booking__steps { grid-template-columns: minmax(0, 1fr); }
  .ir-booking__quote blockquote { font-size: 19px; }
  .ir-booking__card { padding: 20px; }
  .ir-booking__calendar { min-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .ir-booking *,
  .ir-booking__sticky {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Fixed-header clearance that no longer applies.

   partials.css:522 and main.css:2023 both set

     .header-disabled main section:first-child { margin-top: 96px !important }

   That is clearance for the OLD position:fixed header, applied to pages whose
   `_ir_disable_header` meta is "yes" — pages with no .page-heading hero to
   provide the gap themselves. The header is sticky now, so it sits in normal
   flow and the 96px is pure additive whitespace above the fold.

   !important is required here: the declaration it fights is itself !important,
   so out-scoping alone cannot win (DESIGN-SYSTEM.md §6 forbids !important for
   ordinary fights — this is the documented exception). The selector is also
   deliberately narrower than the one it overrides, so it only ever touches
   this template's own hero.
   -------------------------------------------------------------------------- */
.header-disabled main .ir-booking .ir-booking__hero { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   Confirmation variants (page-templates/booking-confirmed.php)
   -------------------------------------------------------------------------- */

/* Success is a real positive state, so the eyebrow takes the semantic green
   rather than the brand indigo — DESIGN-SYSTEM.md §1. */
.ir-booking .ir-booking__eyebrow--ok { color: var(--ir-green); }
.ir-booking .ir-booking__eyebrow--ok::before { background: var(--ir-green); }

/* The hero is centred here: there is no form beside it to balance against. */
.ir-booking__center .ir-booking__eyebrow { justify-content: center; }
.ir-booking__center .ir-booking__title,
.ir-booking__center .ir-booking__lede { margin-inline: auto; }
.ir-booking__center .ir-booking__lede { max-width: 58ch; }

/* Prep list, centred as a block but left-aligned internally so the markers
   line up and the lines stay readable. */
.ir-booking .ir-booking__gets--centered {
  width: fit-content;
  margin-inline: auto;
  margin-top: 28px;
}