/* Worldclass Management — booking page chrome.

   Loaded after site.css by the three booking pages, which build-booking-forms.py
   generates. Nothing else uses it.

   Scope is deliberately small. The form itself is a stock Gravity Forms
   multi-page form: page breaks, the Steps progress indicator, and GF's own
   Previous/Next and per-page validation. All of that is configuration in the
   form editor, not code. site.css already styles .gfield / .ginput_container /
   .gform_button, and those rules apply here untouched.

   What is left for this file is only:
     1. the page chrome — a booking page with the site nav removed
     2. .gf_page_steps and .gform_page_footer, which GF renders on multi-page
        forms and site.css has never had to style before
*/

/* ==========================================================
   PAGE CHROME
   A booking page has one job, and every nav item on it is a way to not
   finish. The menu is replaced by the wordmark and one explicit way out.
   The bar does not name the booking type either — the <h1> directly below
   it does, and saying it twice in 60px of vertical space only crowded the
   logo and, on narrow screens, pushed "Cancel booking" off the edge.
   ========================================================== */
.bk-body{background:var(--paper-2)}

/* The banner carries the brand gradient, with a flat ink scrim laid over it.
   Unscrimmed, the orchid end of the ramp is only 3.2:1 against white — fine
   for the wordmark, a fail for the 11px label beside it. The scrim drops the
   whole band evenly so every piece of text clears AA (~5:1 at the lightest
   point) while the colour still travels across the bar. */
.bk-head{background-image:linear-gradient(rgba(10,10,12,.25),rgba(10,10,12,.25)),var(--grad);
  background-color:var(--ink)}
.bk-head__bar{max-width:820px;margin:0 auto;padding:15px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
/* The wordmark artwork, not the eagle mark — at the size this bar wants the
   eagle reduces to an unreadable smudge, while the wordmark is already set as
   type. It is white on transparent, so it reads on the gradient band and
   nowhere lighter. No JS fallback runs on booking pages (they load booking.js,
   not site.js), so the alt text is the fallback: if the file goes missing the
   browser sets "Worldclass Management" in white, in place.

   -slim, NOT the artwork the footer uses. The full lockup carries a third,
   much smaller line, and a header bar cannot be made tall enough to set that
   line legibly without the logo taking over the page the form is supposed to
   own. The slim cut drops it, so the same bar height buys bigger type on the
   two lines that are left.

   Box is pinned rather than left to the file's own size, so the asset can
   carry more pixels than the box: the artwork is a 520x92 export drawn into
   260x46, which is 2x on retina and downsamples cleanly on 1x. Height is
   stated, not auto, so the bar reserves the space before the PNG arrives.
   Keep any replacement to the same 5.65:1 ratio — object-fit is not set, so
   a different ratio stretches the artwork rather than cropping it. */
.bk-head__logo{width:260px;height:46px;display:block}
.bk-head__exit{font-size:12px;color:rgba(255,255,255,.78);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.bk-head__exit:hover{color:#fff;border-bottom-color:#fff}

.bk-main{max-width:820px;margin:0 auto;padding:40px 32px 44px}
.bk-intro{margin-bottom:26px}
.bk-intro h1{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;
  line-height:1.1;letter-spacing:-.4px;margin-bottom:10px}
.bk-intro p{color:var(--text-mute);font-size:15px;line-height:1.7;
  font-weight:300;max-width:60ch}
.bk-panel{background:var(--paper);border:1px solid var(--line);
  border-radius:6px;padding:34px 36px 30px}
/* Standing note under the form. Quieter than the form itself — it is context,
   not an instruction competing with the fields. */
.bk-note{margin-top:22px;padding:0 4px;font-size:13.5px;line-height:1.75;
  color:var(--text-mute);font-weight:300;max-width:66ch}

/* Thin footer — one line, a rule above it, nothing else. No underlines or
   hover treatment: at this size they read as decoration on text that is only
   there to be findable. */
/* site.css dresses the bare `footer` element for the full site footer, in two
   separate blocks, and ALL of it has to be undone here rather than added to:
     footer{}          dark background, then later a gradient one, 70px padding
     footer::before    3px brand-gradient strip along the top
     footer::after     a 640px radial bloom, anchored bottom-right
   The bloom is the one that keeps reappearing: it is far bigger than this
   42px bar, so what shows through is the top arc of the circle — a soft wash
   across the right-hand side that reads exactly like a background. */
.bk-foot{border-top:1px solid var(--line);background:none;padding:0;color:inherit;
  position:static;overflow:visible}
.bk-foot::before,.bk-foot::after{content:none;background:none}
.bk-foot__bar{max-width:820px;margin:0 auto;padding:12px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--text-mute);font-weight:300}
/* font-size:inherit matters — site.css pins footer links to 14px, which left
   them a size larger than the copyright line they sit beside. */
.bk-foot__bar a{color:inherit;text-decoration:none;font-size:inherit}
.bk-foot__bar a:hover{color:var(--text-dark)}
.bk-foot__tel{font-weight:600;color:var(--text-dark)}

/* ==========================================================
   GF STEPS INDICATOR
   Form settings → Progress Indicator → "Steps". GF renders this markup and
   moves gf_step_active / gf_step_completed itself; the classes below are its
   own, so nothing here depends on custom output.
   ========================================================== */
.gf_page_steps{display:flex;gap:6px;margin-bottom:26px;
  overflow-x:auto;scrollbar-width:none}
.gf_page_steps::-webkit-scrollbar{display:none}
.gf_step{flex:1 1 0;min-width:110px;display:flex;flex-direction:column;gap:8px;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;
  color:#9a99a6}
/* The rail is drawn on the step itself rather than as extra markup, so the
   indicator stays exactly what GF outputs. */
.gf_step::before{content:'';display:block;height:3px;border-radius:2px;
  background:var(--line)}
.gf_step_completed{color:var(--text-mute)}
.gf_step_completed::before{background:var(--violet)}
.gf_step_active{color:var(--text-dark)}
.gf_step_active::before{background:var(--grad)}
.gf_step_number{opacity:.5;margin-right:6px}
.gf_step_label{white-space:nowrap}

/* ==========================================================
   GF PAGES
   GF shows one .gform_page at a time and puts Previous/Next in the page
   footer, with the submit button on the last page only.
   ========================================================== */
.gform_page[style*="display: none"],.gform_page[hidden]{display:none}

/* The page's own heading. GF renders the page break's title here; it is the
   only thing standing in for the <legend> the single-page form had. */
.bk-legend{font-size:12px;letter-spacing:2px;text-transform:uppercase;
  font-weight:600;color:var(--violet);margin-bottom:22px}

.gform_page_footer{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Next carries the same weight as Submit — it is the forward action on every
   page but the last, and site.css only styles .gform_button. */
.gform_wrapper .gform_next_button{display:inline-block;padding:15px 30px;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;font-weight:500;border:0;border-radius:3px;
  font-family:inherit;cursor:pointer;background:var(--grad);color:#fff;
  box-shadow:var(--bevel);transition:transform .2s,box-shadow .2s}
.gform_wrapper .gform_next_button:hover{transform:translateY(-2px);
  box-shadow:var(--bevel),0 10px 30px rgba(var(--violet-rgb),.35)}
/* Previous is quiet — present for confidence, never competing with the
   thing that moves forward. */
.gform_previous_button{background:none;border:1px solid var(--line);
  color:var(--text-mute);padding:15px 24px;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;font-weight:500;border-radius:3px;cursor:pointer;
  font-family:inherit;transition:border-color .2s,color .2s}
.gform_previous_button:hover{border-color:var(--text-dark);color:var(--text-dark)}
.gform_page_footer .bk-step-of{margin-left:auto;font-size:12px;
  color:var(--text-mute);font-weight:300}

@media(max-width:720px){
  .bk-head__bar{padding:12px 20px}
  /* 260px leaves a 375px bar no room for "Cancel booking" — the one
     deliberate way out of the form — so the logo yields, not the exit. */
  .bk-head__logo{width:176px;height:31px}
  .bk-main{padding:24px 20px 64px}
  .bk-panel{padding:24px 20px 22px}
  .bk-intro h1{font-size:27px}
  .bk-foot__bar{padding:12px 20px;gap:6px}
  .gform_page_footer{flex-wrap:wrap}
  .gform_page_footer .bk-step-of{margin-left:0;flex-basis:100%;order:3}
}