/**
 * Booking request form tweaks.
 *
 * All rules apply only to the public booking form. This CSS is in the
 * booking_calendar library, which loads only on that form.
 *
 * 1. The School select uses Select2. These rules make it look like the native
 *    `select` in the theme (design/scss/rebrand/components/_form_fields.scss).
 *    The values are the theme variables: border #aaa, background #f8f8f8,
 *    text #1a1a1a, brand blue #0032be, and the same 16x7 blue chevron SVG.
 * 2. booking-calendar.js adds the "Address on record" line
 *    (.education-school-address) below the School select. It shows as a
 *    callout with a teal left border.
 * 3. booking-calendar.js adds the enquiry-type lock note
 *    (.education-enquiry-lock) below the School select. It tells why "Book an
 *    incursion" is disabled for a school that is not on the list.
 * 4. booking-calendar.js highlights the "Confirm email" description when it
 *    blocks a paste into that field (.education-no-paste).
 */

/* --- School Select2: match the rebrand form field ----------------------- */
.select2-container--default .select2-selection--single {
  height: auto;
  border: 2px solid #aaa;
  border-radius: 0;
  background-color: #f8f8f8;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding: 1rem 3.5rem 1rem 1.5rem;
  color: #1a1a1a;
  line-height: 1.5;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #707070;
}

/* Swap Select2's default caret for the brand-blue chevron used site-wide. */
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 0;
  right: 1.5rem;
  width: 16px;
  height: 100%;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  display: none;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow::before {
  content: "";
  display: block;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='16' height='7' viewBox='0 0 16 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1 1 7 5 7-5' stroke='%230032BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right center;
  background-size: 16px 7px;
}

/* Focus and open: mirror the native field's blue border on white. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #0032be;
  background-color: #fff;
}

/* Dropdown, search box and options. */
.select2-container--default .select2-dropdown {
  border: 2px solid #0032be;
  border-radius: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 0.5rem 0.75rem;
  border: 2px solid #aaa;
}

.select2-container--default .select2-results__option {
  padding: 0.5rem 1.5rem;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #0032be;
}

/* --- Address on record: teal left-border callout ------------------------ */
.education-school-address {
  margin-block: 1.5rem;
  padding-block: 0.5rem;
  padding-inline-start: 1rem;
  border-left: 4px solid #78d2e6;
  color: #1a1a1a;
}

.education-school-address__heading {
  display: block;
  font-weight: 700;
}

.education-school-address__value {
  display: block;
}

/* When no school is selected the box is hidden; keep it from leaving a gap. */
.education-school-address[hidden] {
  display: none;
}

/* --- Enquiry type locked to a question ---------------------------------- */
.education-enquiry-lock {
  margin-block: 1rem 0;
  padding-block: 0.5rem;
  padding-inline-start: 1rem;
  border-left: 4px solid #78d2e6;
  color: #1a1a1a;
}

.education-enquiry-lock[hidden] {
  display: none;
}

/* Grey a disabled enquiry-type option. The unlisted-school lock (client side)
   and the killswitch (server side) disable it. The theme hides the real radio
   and draws it on the label's ::before, so the label gets the disabled style.

   Keep `fieldset .form_row`. Without it, the theme's
   `fieldset .form_row [type="radio"] + label` has the same specificity and
   wins, because the theme CSS loads later. */
fieldset .form_row input[name="ready_to_book"]:disabled + label {
  color: #707070;
  cursor: not-allowed;
}

fieldset .form_row input[name="ready_to_book"]:disabled + label::before {
  border-color: #ccc;
}

/* The theme spaces fields with `.form_row + .form_row { margin-top: 2.5rem }`
   (design/scss/rebrand/components/_form_rows.scss). The callout and the lock
   note sit between two .form_row elements, so the next field loses its top
   margin. Add the same gap after either one. This applies also when they are
   hidden, because a display:none sibling still breaks the `+` match. */
.education-school-address + .form_row,
.education-enquiry-lock + .form_row {
  margin-top: 2.5rem;
}

/* --- "Confirm email": paste blocked ------------------------------------- */

/* The "Confirm email" description. booking-calendar.js adds this class, so a
   blocked paste can highlight it. The text comes from the webform config
   ('#confirm__description'), so it shows also without JavaScript. The plain
   class has no visual style, because the text is always on screen.

   Only the transition is here. The modifier sets the highlight. */
.education-no-paste {
  transition: background-color 0.6s ease-out;
}

/* The blocked state. It is added on `paste` or `drop` and removed on the
   next keystroke. It uses a background colour, not a border, because a border
   would move the fields below it. */
.education-no-paste_blocked {
  background-color: #daf5f5; /* $color_background_info — see the banner below. */
  transition: none; /* Arrive instantly, fade out on removal. */
}

/* With reduced motion, the colour still shows, but with no fade. */
@media (prefers-reduced-motion: reduce) {
  .education-no-paste {
    transition: none;
  }
}

/* --- "Bookings closed" info banner -------------------------------------- */

/* The killswitch notice that yvw_education_booking_form_alter() adds above
   the form. It follows Figma 4747:45681, the rebrand inline info banner:
   32px outlined ⓘ, 24px gutter, sky-blue-25 background, deep-blue text.

   This CSS does not go through the theme's Sass, so the values are written in
   full. #daf5f5 is `$color_background_info` and #020a5a is
   `$color_brand_deep_blue` in design/scss/rebrand/variables/_colours.scss.
   If the palette changes, change these values too.

   Do not use `messages messages--warning`: the theme has no `.messages`
   style. */
.education-booking-notice {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  /* 2.5rem is the same as `.form_row + .form_row` in the theme's
     _form_rows.scss. */
  margin-block-end: 2.5rem;
  padding-block: 1.5rem;
  padding-inline: 1rem;
  background-color: #daf5f5;
  color: #020a5a;
}

/* The icon is decoration, so it is a pseudo-element. This keeps it out of the
   accessibility tree.

   It is a data URI, like the chevron above. A link to the theme's compiled
   `images/icon_info_blue.svg` would break if the theme build moves it. The
   paths are the same icon, scaled to 32px.

   Keep `flex-shrink: 0`. Without it, the icon becomes very narrow when the
   text wraps. */
.education-booking-notice::before {
  content: "";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32.2609 32.2609' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.1304 31.2609C24.4867 31.2609 31.2609 24.4867 31.2609 16.1304C31.2609 7.77412 24.4867 1 16.1304 1C7.77412 1 1 7.77412 1 16.1304C1 24.4867 7.77412 31.2609 16.1304 31.2609Z' stroke='%23020A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.1304 8.30435C16.4186 8.30435 16.6522 8.07075 16.6522 7.78261C16.6522 7.49447 16.4186 7.26087 16.1304 7.26087C15.8423 7.26087 15.6087 7.49447 15.6087 7.78261C15.6087 8.07075 15.8423 8.30435 16.1304 8.30435Z' fill='%23020A5A' stroke='%23020A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.1304 12.4783V24.4783' stroke='%23020A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Label/Medium/Mobile from the design: 16px/22px, 0.16px tracking, and
   weight 600 ("Headline" in the `yvw-rational` family, see _fonts.scss). The
   font family is inherited. Set all three values, because the theme body text
   is 18px/25.2px, weight 400.

   `min-width: 0` lets the flex item become narrower than its longest word, so
   `overflow-wrap` can break it. */
.education-booking-notice__body {
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: 0.01em;
}

/* The message is usually plain text, but Xss::filterAdmin lets an admin add
   block elements. Remove the outer margins, so the banner padding sets the
   edges. Put 16px between the blocks, as in the design. */
.education-booking-notice__body > :first-child {
  margin-block-start: 0;
}

.education-booking-notice__body > :last-child {
  margin-block-end: 0;
}

.education-booking-notice__body > * + * {
  margin-block-start: 1rem;
}