/* ============================================================================
   ShiftCompass site — conversion edits (from the VMG recommendations,
   Oct 31 2026). This file is ADDITIVE: it loads after site.css and only adds
   or overrides what the conversion items need. site.css is untouched.

   Items implemented here:
     1.3  sticky header + mobile booking bar
     1.4  founder block
     2.7  larger mobile tap targets
   (1.2 CTA, 2.1 removed decorative rows, 2.2 reordered audience are in the
    HTML; 2.6 analytics is the GTM snippet in the HTML <head>.)
   ========================================================================== */

/* ---- 1.3 Sticky header -------------------------------------------------- */
/* The header now stays at the top of the viewport. It needs a solid-ish
   background so page content does not show through as it scrolls under. */
header.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* ---- 1.3 Mobile booking bar --------------------------------------------- */
/* Hidden on desktop (the sticky header already carries the button there).
   On phones, where the header button is hidden, this bar carries the CTA. */
.mobile-book-bar { display: none; }

@media (max-width: 560px) {
  .mobile-book-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    transform: translateY(130%);
    transition: transform 0.25s ease;
  }
  .mobile-book-bar.show { transform: none; }
  .mobile-book-bar .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
  /* so the bar never permanently hides the last line of the footer */
  .foot { padding-bottom: 96px; }
}

/* ---- 1.4 Founder block -------------------------------------------------- */
.founder {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) var(--gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.founder-photo {
  width: clamp(96px, 12vw, 150px);
  height: clamp(96px, 12vw, 150px);
  border-radius: 12px;
  object-fit: cover;
  background: var(--panel);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
}
.founder-copy h2 {
  font-size: clamp(22px, 2vw, 30px);
  margin-bottom: 6px;
}
.founder-role {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.founder-copy p:last-child {
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0;
}
@media (max-width: 560px) {
  .founder { grid-template-columns: 1fr; }
}
/* the block is `hidden` in the HTML until the photo and the approved bio are
   in; `display: grid` above would otherwise override the attribute */
.founder[hidden] { display: none; }

/* ---- 2.7 Mobile tap targets -------------------------------------------- */
/* Every interactive thing gets at least a 44px tall tap area on phones,
   including the inline email link, which was ~20px tall before. */
@media (max-width: 560px) {
  a.btn { min-height: 44px; }
  .contact-copy a.contact-link:not(.btn),
  .faq-list a,
  .foot a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
}