/* ============================================================
   Chef Cut — Catering page
   Extends css/styles.css. Embeds the Tripleseat event request form.
   ============================================================ */

/* ---------- Hero ---------- */

.cat-hero {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: var(--cc-leather);
}

.cat-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cat-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(28, 22, 18, 0.92) 0%,
    rgba(28, 22, 18, 0.75) 40%,
    rgba(28, 22, 18, 0.5) 65%,
    rgba(28, 22, 18, 0.38) 100%
  );
}

.cat-hero__content {
  position: relative;
  z-index: 2;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  max-width: 680px;
  padding: 90px;
}

.cat-hero__script {
  display: block;
  font-size: 42px;
}

.cat-hero__eyebrow {
  font-size: var(--serif-2);
}

.cat-hero__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cc-ivory);
}

.cat-hero__body {
  margin: 0;
  max-width: 500px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(249, 240, 219, 0.85);
}

.cat-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

/* ---------- Form ---------- */

.cat-form {
  background: var(--surface-ivory);
  padding: 96px 100px;
}

.cat-form__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 64px;
  align-items: start;
}

.cat-form__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cat-form__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.cat-form__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
}

.cat-form__phone {
  font-weight: 700;
  color: var(--cc-garnet);
  white-space: nowrap;
}

.cat-form__embed {
  background: var(--cc-white);
  padding: 32px;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  min-height: 320px;
  overflow-x: auto;
}

.cat-form__embed #tripleseat_link {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .cat-form {
    padding: 64px 40px;
  }

  .cat-form__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .cat-hero,
  .cat-hero__content {
    min-height: 520px;
  }

  .cat-hero__content {
    padding: 64px 24px;
  }

  .cat-hero__headline {
    font-size: 44px;
  }

  .cat-form {
    padding: 48px 20px;
  }

  .cat-form__headline {
    font-size: 34px;
  }

  .cat-form__embed {
    padding: 20px;
  }
}

/* ---------- Tripleseat form skin ----------
   The embed script injects Tripleseat's own form markup and stylesheet
   into .cat-form__embed. Everything here is scoped under #request so it
   out-ranks Tripleseat's defaults without !important, and targets plain
   elements so it holds up if their class names change.

   Date and time pickers draw pop-up calendars and time lists; every rule
   below skips anything inside those pop-ups (the :not(:where(...)) list,
   which adds no specificity) so
   their grids keep Tripleseat's own layout. */

#request .cat-form__embed,
#request .cat-form__embed form {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
}

#request .cat-form__embed form {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  max-width: none;
  width: 100%;
}

#request .cat-form__embed :is(h1, h2, h3, h4, legend):not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  background: none;
  border: 0;
}

#request .cat-form__embed p:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--text-body);
}

#request .cat-form__embed fieldset:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

#request .cat-form__embed table:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  background: none;
}

#request .cat-form__embed tr:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  display: block;
}

#request .cat-form__embed :is(td, th):not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  vertical-align: top;
}

#request .cat-form__embed label:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-body);
}

#request .cat-form__embed :is(input[type="radio"], input[type="checkbox"]) + label:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  display: inline;
  margin: 0 16px 0 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#request .cat-form__embed :is(.required, .req, abbr[title]) {
  color: var(--cc-garnet);
  text-decoration: none;
}

#request .cat-form__embed :is(:is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select), textarea):not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 48px;
  margin: 0 0 18px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-body);
  background-color: var(--cc-white);
  border: 0;
  border-radius: var(--radius-none);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  transition: box-shadow var(--dur) var(--ease-standard);
  -webkit-appearance: none;
  appearance: none;
}

#request .cat-form__embed select:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2379000F' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

#request .cat-form__embed textarea:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  height: auto;
  min-height: 140px;
  padding: 14px 16px;
  resize: vertical;
}

#request .cat-form__embed :is(input, select, textarea):focus:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cc-garnet);
}

#request .cat-form__embed :is(input[type="radio"], input[type="checkbox"]):not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: -2px;
  accent-color: var(--cc-garnet);
}

#request .cat-form__embed :is(input[type="submit"], button:not([type="button"]), .button, .btn):not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-top: 8px;
  padding: 0 32px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--cc-ivory);
  background: var(--cc-garnet);
  background-image: none;
  border: 0;
  border-radius: var(--radius-none);
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-standard);
}

#request .cat-form__embed :is(input[type="submit"], button:not([type="button"]), .button, .btn):hover:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  background: var(--brand-hover);
}

/* Fields with an icon box (date and time). The box is pinned to the
   field's edge at the field's exact height, the text starts clear of it,
   and the gap below lives on the wrapper so the box can't stretch. */

#request .cat-form__embed :has(> :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i) + :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select)),
#request .cat-form__embed :has(> :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select) + :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i)) {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

#request .cat-form__embed :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i) + :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select),
#request .cat-form__embed :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select):has(+ :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i)) {
  margin: 0;
}

#request .cat-form__embed :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i) + :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select) {
  padding-left: 60px;
}

#request .cat-form__embed :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select):has(+ :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i)) {
  padding-right: 60px;
}

#request .cat-form__embed :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i):has(+ :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select)),
#request .cat-form__embed :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select) + :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i) {
  position: absolute;
  top: 0;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--cc-garnet);
  background: var(--cc-paper);
  border: 0;
  border-radius: var(--radius-none);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

#request .cat-form__embed :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i):has(+ :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select)) {
  left: 0;
}

#request .cat-form__embed :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select) + :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i) {
  right: 0;
}

#request .cat-form__embed :is(:is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i):has(+ :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select)), :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), select) + :is(.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append, .add-on, [class*="addon"], [class*="icon"], span:has(> i), span:has(> svg), div:has(> i), div:has(> svg), a:has(> i), button:has(> i), i)) :is(i, svg, span) {
  position: static;
  margin: 0;
  color: inherit;
  fill: currentColor;
}

/* Event date. Tripleseat's date entry is a wrapper holding a hidden
   native <input type="date"> (it drives the pop-up calendar), the visible
   MM/DD/YYYY text field, and a calendar toggle after it. Tripleseat sizes
   the wrapper to the field's natural width; make it full width like every
   other field, keep the native input invisible underneath, and pin the
   toggle inside the left edge at the field's height so it lines up
   with the clock boxes on the time fields. */

#request .cat-form__embed .tripleseat-dlf-date-wrapper {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 18px;
  padding: 0;
}

#request .cat-form__embed .tripleseat-dlf-date-wrapper .tripleseat-dlf-date-native {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}

#request .cat-form__embed .tripleseat-dlf-date-wrapper .tripleseat-dlf-date-display {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 16px 0 60px;
}

#request .cat-form__embed .tripleseat-dlf-date-wrapper .tripleseat-dlf-date-picker-toggle {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px;
  margin: 0;
  padding: 0;
  color: var(--cc-garnet);
  background: var(--cc-paper);
  border: 0;
  border-radius: var(--radius-none);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  transform: none;
  cursor: pointer;
}

#request .cat-form__embed .tripleseat-dlf-date-wrapper .tripleseat-dlf-date-picker-toggle i {
  position: static;
  margin: 0;
  font-size: 15px;
  color: inherit;
}

/* First and last name. Tripleseat sizes the two name inputs with a
   selector heavier than the generic field rule (an id plus a class
   chain) and drops their height and vertical padding, flattening them
   to the text height. #request#request lifts this rule above theirs,
   and min-height keeps the 48px box even if a height:auto gets through. */

#request#request .cat-form__embed .tripleseat-dlf-name-fields .tripleseat-dlf-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0 0 18px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: normal;
  color: var(--text-body);
  background-color: var(--cc-white);
  border: 0;
  border-radius: var(--radius-none);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

#request#request .cat-form__embed .tripleseat-dlf-name-fields .tripleseat-dlf-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cc-garnet);
}

/* Side by side, the two halves are too narrow on a phone for their
   placeholders; stack them. */
@media (max-width: 480px) {
  #request#request .cat-form__embed .tripleseat-dlf-name-fields {
    display: block;
  }

  #request#request .cat-form__embed .tripleseat-dlf-name-field {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

/* Helper lines such as "Enter date in MM/DD/YYYY format" */
#request .cat-form__embed :is(.help-block, .help-text, .hint, .tripleseat-dlf-help-text):not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  display: block;
  margin: -10px 0 18px;
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
}

#request .cat-form__embed :is(.error, .errors, .field_with_errors, .error_message) {
  font-size: 13px;
  color: var(--cc-garnet);
}

#request .cat-form__embed .field_with_errors :is(input, select, textarea) {
  box-shadow: inset 0 0 0 2px var(--cc-garnet);
}

#request .cat-form__embed a:not(:where(.ui-datepicker, .datepicker-dropdown, .datepicker.dropdown-menu, .bootstrap-timepicker-widget, .ui-timepicker-wrapper, .ui-timepicker-list, .flatpickr-calendar, .xdsoft_datetimepicker, .daterangepicker, .bootstrap-datetimepicker-widget, .dropdown-menu) *) {
  color: var(--cc-garnet);
}