/* Garrison Revenue — mobile layer.
   The page markup carries desktop layout in inline styles, which beat
   normal stylesheet rules. Overriding them needs !important; that is a
   consequence of the canvas export, not a preference.
   Loaded after motion.css so it wins where the two overlap. */

/* Never let a phone scroll sideways, whatever a child tries to do.
   clip rather than hidden on purpose: overflow-x:hidden turns the body
   into a scroll container, which silently breaks the sticky header. */
html, body { max-width: 100%; overflow-x: clip; }
* { -webkit-text-size-adjust: 100%; }

/* Kill the 300ms tap delay and the grey flash on tap. */
a, button, input, .chip, .pill, [style-hover] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Momentum scrolling inside anything that scrolls. */
body { -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------
   Hamburger. Hidden on desktop, the only nav control on mobile.
   --------------------------------------------------------------- */

.gr-nav-toggle {
  display: none;
  width: 44px; height: 44px;          /* a real thumb target */
  margin-left: auto;
  padding: 11px 10px;
  background: none; border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 4px;
}
.gr-nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: oklch(0.28 0.045 155);
  border-radius: 2px;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.30, 1),
              opacity 200ms ease;
  transform-origin: center;
}
/* three bars fold into an X */
header.gr-open .gr-nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
header.gr-open .gr-nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
header.gr-open .gr-nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------------------------------------------------------------
   Phone and small tablet
   --------------------------------------------------------------- */

@media (max-width: 900px) {

  .gr-nav-toggle { display: flex; }

  /* header collapses to one row; nav and CTAs wrap underneath */
  .gr-nav-bar {
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 12px 18px !important;
  }

  .gr-nav, .gr-nav-cta {
    flex-basis: 100%;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0 !important;
    transition: max-height 400ms cubic-bezier(0.16, 1, 0.30, 1),
                opacity   240ms ease,
                margin    400ms cubic-bezier(0.16, 1, 0.30, 1);
  }
  header.gr-open .gr-nav     { max-height: 320px; opacity: 1; margin-top: 10px !important; }
  header.gr-open .gr-nav-cta { max-height: 220px; opacity: 1; margin-top: 12px !important;
                               padding-bottom: 6px; }

  .gr-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    font-size: 16px !important;
  }
  .gr-nav a {
    padding: 14px 2px;
    border-bottom: 1px solid oklch(0.90 0.02 95);
    border-top: 0 !important;
  }

  .gr-nav-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .gr-nav-cta a {
    text-align: center;
    padding: 14px 18px !important;
    font-size: 16px !important;
  }

  /* ---- layout ---- */

  /* every grid becomes a single column */
  .gr-grid { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* breathing room instead of 40px gutters */
  section { padding-left: 20px !important; padding-right: 20px !important; }
  .gr-nav-bar { padding-left: 18px !important; padding-right: 18px !important; }
  section > div[style*="max-width: 1240px"],
  section > div[style*="max-width: 1080px"],
  header > div, footer > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  footer > div { gap: 28px !important; }

  /* the hero eyebrow sat a full desktop 72px under the sticky header,
     which is most of a phone screen before the first word. */
  .gr-hero-home { padding-top: 34px !important; }

  /* Funnel pages opt out of the sticky header: on a phone it chases the
     reader down a short page and crowds the step it is meant to frame. */
  .gr-header-static { position: static !important; }

  /* a sticky sidebar makes no sense in one column */
  .gr-sticky { position: static !important; top: auto !important; }

  /* ---- type ---- */
  h1 { font-size: 34px !important; line-height: 1.1 !important; }
  h2 { font-size: 26px !important; line-height: 1.16 !important; }
  h3 { font-size: 20px !important; }
  p  { text-wrap: pretty; }

  /* oversized pull-quotes and stat numbers */
  [style*="font-size: 30px"], [style*="font-size: 28px"] { font-size: 21px !important; }
  [style*="font-size: 32px"] { font-size: 24px !important; }

  /* ---- touch targets ---- */
  .chip { padding: 12px 18px !important; font-size: 14px !important; }
  footer a { display: inline-block; padding: 7px 0; }

  /* stat rows read better as a 2-up than a cramped single line */
  section > div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    gap: 22px !important;
  }
}

/* ---------------------------------------------------------------
   Narrow phones
   --------------------------------------------------------------- */

@media (max-width: 420px) {
  h1 { font-size: 30px !important; }
  section { padding-left: 16px !important; padding-right: 16px !important; }
  .gr-hero-home { padding-top: 26px !important; }

  header > div, footer > div { padding-left: 16px !important; padding-right: 16px !important; }

  /* the booking calendar: five day pills will not fit, so show three */
  #days { grid-template-columns: repeat(3, 1fr) !important; }
  #slots { grid-template-columns: repeat(2, 1fr) !important; }
  .card { padding: 22px !important; }
}

/* ---------------------------------------------------------------
   Coarse pointers: no hover lift, since there is no hover.
   Prevents a card sticking in its lifted state after a tap.
   --------------------------------------------------------------- */

@media (hover: none) {
  .gr-card:hover, a[data-cat]:hover { transform: none; box-shadow: none; }
  .gr-card:active, a[data-cat]:active { transform: scale(0.99); }

  /* motion.js flags links that render below the 44px thumb minimum */
  .gr-tap { min-height: 44px; display: flex; align-items: center; }
}