/* ============================================================
   Ink & Intuition - persistent booking action (mobile only)

   Written 2026-07-30. Daniel: "We came to the realisation a person may click
   immediately on the cards in 3 ways to work with me, immediately shooting them
   to the bottom of the page. This skips all the website." All three Ways cards
   were `href="#book"` with the whole card as the anchor.

   The fix has two halves. Agent Y turned the cards into in-place disclosures so
   a tap reads more rather than navigating. This is the other half: if booking is
   permanently one tap away, the cards never need to be booking links at all.

   Daniel's own worry about the obvious alternative was that "just popping up the
   contact info may be too repetitive", so this deliberately carries ONE action
   and no contact details. The wording is copied verbatim from the CTA's own
   primary button in 07-cta.html, so nothing new is being said to a visitor.

   WHY A FLOATING PILL RATHER THAN A FULL-WIDTH BAR. Three reasons, and they all
   point the same way:

   1. Daniel's item 10 in the same round of feedback was that cards should be
      narrower because "we need to see the hard work we put in the background
      animations". A full-width bar with a scrim would cover the bottom of every
      one of those animations. A pill covers a fraction of it.
   2. A frosted bar wants a backdrop-filter. This page already ships 95 of them
      and they are a measured part of why iOS struggled. Adding a 96th to fix a
      performance-adjacent complaint would be perverse. The pill is an opaque
      fill plus a shadow: no blur pass, no new compositing layer cost.
   3. Less visual weight for something that is present for most of the page.

   It is mobile only, by width. Desktop has the nav CTA permanently visible and
   does not have the problem.
   ============================================================ */

/* Hidden everywhere by default, so desktop never pays for it and a stylesheet
   load order accident cannot flash it into view. */
.bookbar {
  display: none;
}

/* PARKED BY DANIEL 2026-07-30. js/booking-bar.js has an ENABLED flag set to
   false, and it stamps `hidden` on the element. This rule is the other half of
   that, and it is not redundant: the mobile media query below sets
   `display: block`, and an explicit display value BEATS the UA stylesheet's
   `[hidden] { display: none }`. Without this the pill would still paint on a
   phone despite the attribute. !important because the media query is more
   specific in cascade order. Delete nothing to re-enable - just flip ENABLED. */
.bookbar[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .bookbar {
    display: block;
    position: fixed;
    left: 50%;
    bottom: 0;
    /* Below .nav (150) so an open mobile menu covers this, and below .skip-link
       (200) so the first thing a keyboard user reaches is never occluded. The
       enquiry <dialog> is opened with showModal(), which promotes it to the top
       layer and beats any z-index, so it needs no allowance here. */
    z-index: 120;

    /* env() falls back to 0px on anything without a home indicator. On an
       iPhone 17 Pro this is what keeps the tap target clear of the gesture bar
       instead of half underneath it. Nothing else on this site used a safe-area
       inset before now. */
    margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(calc(100% + 14px + env(safe-area-inset-bottom, 0px)));

    max-width: calc(100vw - 32px);

    opacity: 0;
    visibility: hidden;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
  }

  /* visibility rather than display keeps the transition, and still removes the
     link from the tab order while it is away. A fixed, invisible link that is
     focusable is a keyboard trap you cannot see. */
  .bookbar.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
  }

  /* Reuses .btn .btn-primary from base.css so it is the same object as the
     CTA's own button and cannot drift from it. Only the things a floating
     element needs are set here. base.css belongs to another agent this pass and
     is deliberately not touched. */
  .bookbar__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Comfortably above the 44px minimum, because this is the single most
       important tap target on the page. */
    min-height: 50px;
    white-space: nowrap;
    box-shadow: var(--shadow-cta), 0 10px 28px -10px rgba(42, 34, 48, 0.45);
  }
}

/* The slide is decoration; the button is not. Reduced motion keeps the button
   and drops the travel, rather than hiding it. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .bookbar {
    transition: opacity 160ms linear;
    transform: translateX(-50%);
  }

  .bookbar.is-visible {
    transform: translateX(-50%);
  }
}

@media (forced-colors: active) {
  .bookbar__link {
    box-shadow: none;
    border: 2px solid ButtonText;
  }
}