/* Release-31: page transitions, card to hero image, language slide, FAQ accordions and the quick exit control.
   Every motion rule is inside prefers-reduced-motion: no-preference. The quick exit control has no motion at all. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .site-header { view-transition-name: cfa-site-header; }

  /* Page content: the old page fades out on top while the new page, always fully opaque, rises 12px into place. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(.2, 0, 0, 1);
    animation-fill-mode: both;
  }
  ::view-transition-old(root) { z-index: 1; animation-name: cfa-vt-fade-out; }
  ::view-transition-new(root) { animation-name: cfa-vt-rise; }

  /* The site header and the quick exit control stay still: no fade, no slide. */
  ::view-transition-group(cfa-site-header),
  ::view-transition-group(cfa-quick-exit),
  ::view-transition-new(cfa-site-header),
  ::view-transition-new(cfa-quick-exit) { animation: none; }
  ::view-transition-old(cfa-site-header),
  ::view-transition-old(cfa-quick-exit) { display: none; }

  /* Card to hero: the hero image moves and resizes from the clicked card; it is never faded in.
     The card picture fades out on top of it while the group morphs. */
  ::view-transition-group(cfa-card-hero) {
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(.2, 0, 0, 1);
  }
  ::view-transition-image-pair(cfa-card-hero) { overflow: clip; }
  ::view-transition-old(cfa-card-hero),
  ::view-transition-new(cfa-card-hero) {
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
  }
  ::view-transition-old(cfa-card-hero) {
    z-index: 1;
    animation: cfa-vt-fade-out 340ms cubic-bezier(.2, 0, 0, 1) both;
  }
  ::view-transition-new(cfa-card-hero) { animation: none; }

  /* Language switch: English to Spanish moves the page to the left, Spanish to English moves it to the right. */
  html:active-view-transition-type(cfa-lang-es)::view-transition-old(root) { animation-name: cfa-vt-out-left; animation-duration: 320ms; }
  html:active-view-transition-type(cfa-lang-es)::view-transition-new(root) { animation-name: cfa-vt-in-from-right; animation-duration: 320ms; }
  html:active-view-transition-type(cfa-lang-en)::view-transition-old(root) { animation-name: cfa-vt-out-right; animation-duration: 320ms; }
  html:active-view-transition-type(cfa-lang-en)::view-transition-new(root) { animation-name: cfa-vt-in-from-left; animation-duration: 320ms; }

  @keyframes cfa-vt-fade-out { to { opacity: 0; } }
  @keyframes cfa-vt-rise { from { transform: translateY(12px); } }
  @keyframes cfa-vt-out-left { to { opacity: 0; transform: translateX(-48px); } }
  @keyframes cfa-vt-out-right { to { opacity: 0; transform: translateX(48px); } }
  @keyframes cfa-vt-in-from-right { from { transform: translateX(48px); } }
  @keyframes cfa-vt-in-from-left { from { transform: translateX(-48px); } }

  /* FAQ accordions open and close smoothly where the browser supports it; elsewhere they open at once, as before. */
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 260ms cubic-bezier(.2, 0, 0, 1), content-visibility 260ms allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

/* Quick exit: a slim strip at the top of the page holds the note; the button is fixed at the top right, so it stays on screen
   while the page scrolls and is never hidden. Stacking: above the site header (40), so the header never covers it while it
   scrolls away; below the contact bar (50), the mobile menu (60) and the skip link (100). No motion of any kind on this control. */
.cfa-qx {
  position: relative;
  z-index: 45;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  margin: 0;
  padding: .5rem calc(10.5rem + env(safe-area-inset-right)) .5rem calc(1rem + env(safe-area-inset-left));
  background: #060a12;
  color: #f3efe6;
  border-bottom: 1px solid #3a3f4a;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}
.cfa-qx,
.cfa-qx * { transition: none; animation: none; }
.cfa-qx .cfa-qx__note {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 46rem;
  margin: 0;
  padding: 0;
  color: #f3efe6;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
.cfa-qx a.cfa-qx__btn {
  position: fixed;
  top: calc(.5rem + env(safe-area-inset-top));
  right: calc(.75rem + env(safe-area-inset-right));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  max-width: 9.25rem;
  margin: 0;
  padding: 0 .875rem;
  border: 2px solid #060a12;
  border-radius: 10px;
  background: #f3efe6;
  color: #060a12;
  box-shadow: 0 0 0 2px #f3efe6;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.cfa-qx a.cfa-qx__btn:hover { background: #ffffff; color: #060a12; text-decoration: underline; }
/* Focus: a dark ring between two ivory bands, visible over dark and light content alike. */
.cfa-qx a.cfa-qx__btn:focus-visible { outline: 3px solid #060a12; outline-offset: 2px; box-shadow: 0 0 0 2px #f3efe6, 0 0 0 7px #f3efe6; }
/* At phone widths the label wraps onto two lines (the same words), so the button, and the booking room it needs, are about half as wide. */
@media (max-width: 30rem) {
  .cfa-qx { padding-right: calc(6.5rem + env(safe-area-inset-right)); }
  .cfa-qx a.cfa-qx__btn { width: min-content; white-space: normal; padding: .25rem .625rem; font-size: .9375rem; line-height: 1.15; right: calc(.5rem + env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: no-preference) {
  .cfa-qx a.cfa-qx__btn { view-transition-name: cfa-quick-exit; }
}
/* Booking controls keep clear of the button's column: quick-exit.js sets data-cfa-qx-room and --cfa-qx-room on the booking panel
   only when its content would reach under the button. The panel's selects, inputs, buttons and button-like links narrow by that
   much, and so do the rows that hold its buttons side by side (.booking-actions), whose items then wrap within the narrowed row
   instead of narrowing twice. Narrowed labels wrap in balanced lines. Running text with its inline links keeps its width, and so
   does the Calendly frame, a deliberate exception: narrowing a cross-origin embed would break it, and the button covers a part of
   it only while that part is in the top band of the viewport. */
#on-page-booking[data-cfa-qx-room] select,
#on-page-booking[data-cfa-qx-room] button,
#on-page-booking[data-cfa-qx-room] input,
#on-page-booking[data-cfa-qx-room] textarea,
#on-page-booking[data-cfa-qx-room] a[href],
#on-page-booking[data-cfa-qx-room] .booking-actions { max-width: calc(100% - var(--cfa-qx-room, 0px)); }
#on-page-booking[data-cfa-qx-room] .booking-actions > *,
#on-page-booking[data-cfa-qx-room] .booking-actions > a[href] { max-width: 100%; }
#on-page-booking[data-cfa-qx-room] button,
#on-page-booking[data-cfa-qx-room] a[href] { text-wrap: balance; }
@media (forced-colors: active) {
  .cfa-qx a.cfa-qx__btn { border: 2px solid ButtonText; }
}
@media print {
  .cfa-qx { display: none; }
}